基于用户选择的多个动态下拉列表答案

【问题标题】：Multiple, dynamic dropdown list based on user selection基于用户选择的多个动态下拉列表
【发布时间】：2013-07-01 11:56:48
【问题描述】：

我已阅读 stackoverflow 上的所有“动态多个下拉列表”问题，但找不到我要找的内容。

这是州和城市的表格。用户选择一个州，我通过 ajax 请求该特定州 ID 的城市。

但是，我需要已经创建并显示两个选择（也许城市选择变灰）。这里有一个例子PenskeAutomotive。

到目前为止，我所做的只是选择状态，并在执行 ajax 时，从 XMLHttp.ResponseText 创建城市选择。这里有一个例子Dorpdown list example - at bottom of page。

我需要显示两个选择，然后只使用 XMLHttp.ResponseText 的新值更新城市选择。

谁能给我指个方向？

更新：

在发布之后，我发现了一个我以前没有读过的问题。进入它，我可能已经找到了我的方向。我现在只是在尝试。它是 jQuery/Ajax。 Question

【问题讨论】：

◄ 走那条路.. 开个玩笑，你能张贴你有什么吗？
或者更好的是，演示的 JSFiddle 部分？
到目前为止你尝试过什么？发布您当前的代码，以及您遇到的问题。
对不起各位。正如我在更新中所说的那样，我发现这个问题将我带到了我需要的地方。经过几个小时的修改该代码后，我让它完全按照我的需要工作。但是感谢您的回答！

标签： php mysql ajax

【解决方案1】：

不确定您在哪里遇到问题，但（希望）为您指明正确的方向：

您可以在页面上创建两个 <select> 元素，其中 City 下拉菜单具有 HTML disabled 属性，这将使其变灰。

禁用的下拉菜单将没有任何选项，除了可能显示“选择状态”之类的选项。

您将在 State 下拉列表中添加一个 onchange 事件侦听器，该侦听器将执行 AJAX 调用，我建议您在 JSON format 中回复您的回复。

然后您可以清除下一个下拉菜单的选项并从您的服务器创建并附加新选项，然后启用下拉菜单。

如果您想提供到目前为止所做的工作，我相信我们可以帮助调试它。

【讨论】：

这是一个好方法。获得城市列表后，您可以使用它来填充第二个选择元素，然后从那里开始

【解决方案2】：

我在我的网站中使用此代码，也许对您有用：

在头：

<script language="JavaScript" type="text/JavaScript">
    $(document).ready(function(){
        $("#select1").change(function(event){
            var id = $("#select1").find(':selected').val();
            $("#select2").load('../scripts/depto.php?id='+id);
        });
    });
</script>
<script language="JavaScript" type="text/JavaScript">
    $(document).ready(function(){
        $("#select2").change(function(event){
            var id = $("#select2").find(':selected').val();
            $("#select3").load('../scripts/municipios.php?id='+id);
        });
    });
</script>

并在选择中：

<div class='control-group'>
    <label class='control-label' for='typeahead'>Pa&iacute;s </label>
    <div class="controls">
        <select name="IDPAIS" id="select1" required>    
            <?
                $sql = $conn->prepare("SELECT * FROM lista_paises");
                $sql->execute();
                while($row = $sql->fetch(PDO::FETCH_ASSOC)) {
                    echo 
                    '<option value="'.$row[id].'">'.$row[opcion].'</option>';
                }
            ?> 
        </select>
    </div>
</div>
<div class='control-group'>
    <label class='control-label' for='typeahead'>Departamento </label>
    <div class="controls">
        <select name="departamento" id="select2" required></select>
    </div>
</div>
<div class='control-group'>
    <label class='control-label' for='typeahead'>Municipio / Ciudad</label>
    <div class='controls'>
        <select name="ciudad" id="select3" required></select>
    </div>
</div>

在 lista_paises.php 中

<?
include('../include/config.php');
$query = $conn->prepare("SELECT * FROM PAISES);

$respuesta="[";
foreach ($aMunicipios as $muni) {
    $respuesta .="{id:".$muni["id_municipio"].",nombre_municipio:'".$muni["municipio_nombre"]."'},";
    }
$respuesta = substr($respuesta,0,strlen($respuesta)-1);

$respuesta.="]";
echo $respuesta;
}
?>

在 depto.php 中

<?
include('../include/config.php');
$sql = $conn->prepare("SELECT * FROM lista_estados WHERE relacion = ".$_GET['id']);
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC)) {
echo 
'<option value="'.$row[id].'">'.$row[opcion1].'</option>';
}
?>

在 municipios.php(ciudad/city)

<?
include('../include/config.php');
$sql = $conn->prepare("SELECT * FROM MUNICIPIOS WHERE relacion1 = ".$_GET['id']);
$sql->execute();
while($row = $sql->fetch(PDO::FETCH_ASSOC)) {
echo 
'<option value="'.$row[id].'">'.$row[opcion2].'</option>';
}
?>

也许对你有用

【讨论】：

非常感谢。这与我在 UPDATE 的问题链接上找到的非常接近。