0

我有一个下拉列表（在一个 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 是客户端。我还想过将选定的值放在隐藏组件（跨度或其他东西）中并从中获取值。但我不知道如何从组件中获取它。我也见过 AJAX 或 jquery 的使用，但我的知识还不够。

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

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

4

3 回答 3

0

由于 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 与表单一起使用，但这也应该适合您。

于 2012-08-27T05:54:46.977 回答
0

这是解决方案

<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>
于 2012-08-27T06:32:18.177 回答
0

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

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 的版本，但那是更多的代码。

于 2012-08-27T06:57:32.893 回答