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

【问题标题】：get selected item from a dropdown list and save it to a php variable从下拉列表中获取所选项目并将其保存到 php 变量
【发布时间】：2012-08-27 05:31:17
【问题描述】：

我有一个下拉列表（在一个 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，下拉列表中的选项将是狗的品种。

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

【问题讨论】：

是的，我尝试了一些，需要重新加载或提交，但正如我所说，我想避免它。我也试过发帖。但我不能让它工作。我之前使用 $post 从图表中导出图像并且它有效。但这一次，我做不到。
类似 $.post("file.php", name: opt);和 $selname = $_POST["name"];但这不起作用T_T
这里有一些链接Cascading dropdown
谢谢。我会试试那个。
我试过jquery，它工作得很好！谢谢

标签： php javascript jquery ajax drop-down-menu

【解决方案1】：

解决办法

<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>

【讨论】：

【解决方案2】：

你不能让变量在同一个文件中可用，因为 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 与表单一起使用，但这也应该适合您。

【讨论】：

谢谢！我以前试过这个。但我认为这会将页面重定向到同一页面，但在 url 上附加了选项。
@user974227 是的，它就是这样做的。为什么这对你不起作用？
可以，但我不需要重新加载整个页面
@user974227 如果你想获得 PHP 的价值，你必须这样做。如果可能，您可以尝试使用 JS 解决方案来构建新选项。

【解决方案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 的版本，但代码要多一些。

【讨论】：