Question

我有一个下拉列表（在一个php文件中，没有表单标签）

print "<select id="animal" onchange="getSelectedItem(this.value)">
<option value = "Dog"> Dog </option>
<option value = "Cat"> Cat </option>
</select>";

和变量$ selAnimal

和javascript函数

function getSelectedItem(opt){
    //$selAnimal = opt <- how do i do this?
}

我尽可能不想重新加载页面，所以我避免将其放在表单中并按照我的选择提交。我无法使$ .post方法工作。我知道这个事实不能直接完成，因为php是服务器端而javascript是客户端。我还想过将选定的值放在隐藏的组件（span或其他）中并从中获取值。但我不知道如何从组件中获取它。我也看到过使用AJAX或jquery，但我的知识还不够。

我需要将此值保存到php变量，因为我将使用它作为第二个下拉列表中选项的基础。例如，如果我选择Dog，则下拉列表会将狗品种作为选项。

我花了几天时间到处寻找可能的解决方案。非常感谢帮助。谢谢！

Answer 1

你不能让变量可用于同一个文件，因为PHP在JS启动之前声明了它的所有变量。但是，您可以简单地将用户重定向到变量可用的新文件。

使用类似的东西：

function getSelectedItem(opt){
    location.href = location.href + "?selAnimal=" + opt;
}

在PHP中，现在您可以使用selAnimal变量来显示不同的内容，如下所示：

$selectedAnimal = $_GET["selAnimal"];
if($selectedAnimal == "dog"){
    // Whatever you want to do now
}

更好的方法是将POST与表单一起使用，但这也适用于你。

Answer 2

这是解决方案

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#animal').change(function(){
    $.post('loadbreeds.php', { animal:$('#animal').val() },
        function(data){
            $('#breedList').html(data);
        });
    });
});
</script>

<form method="post" >
    <div id="animalList">
        <select id="animal" name="animal">
            <option value="">--Select--</option>
            <?php if (!empty($animals)) { foreach ($animals as $value) { ?>
                <option value="<?php echo $value['animalKey']; ?>"><?php echo $value['animalName']; ?></option>
            <?php }} ?>
        </select>
    </div>
    <div id="breedList">
        <select id="breed" name="breed">
            <option value="">--Select--</option>
        </select>
    </div>
    <input type="submit" value="Submit" />
</form>

loadbreeds.php的代码

$animalKey = $_POST['animal'];
$breeds = selectByKey($animalKey); // code for selecting breeds

<select id="breed" name="breed">
    <option value="">--Select--</option>
    <?php if (!empty($breeds)) { foreach ($breeds as $value) { ?>
        <option value="<?php echo $value['breedKey']; ?>"><?php echo $value['breedName']; ?></option>
    <?php }} ?>
</select>

Answer 3

尝试以下操作，重建第二个下拉列表：

http://jsfiddle.net/kAY7M/59/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

print "<script type=\"text/javascript\">var AnimalTypeList = [\"Dog1,Dog2,Dog3,Dog4\",\"Cat1,Cat2,Cat3,Cat4\"];</script>";

<script type="text/javascript">

$("#animal").change(function () {
    var sel = $("#animal").prop("selectedIndex") - 1;
    var list = AnimalTypeList[sel].split(",");
    var Counter = list.length;
    $("#type").children().remove();
    for (var i = 0; i < Counter; i++) {
        $("#type").append("<option value = '" + list[i] + "'> " + list[i] + "</option>");
    }    
})

</script>

我也可以做一个纯粹的Javascript版本，但这是更多的代码。

从下拉列表中获取所选项目并将其保存到php变量

3 个答案: