Question

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

这是州和城市的形式。用户选择状态，通过ajax我请求城市获取该特定的状态ID。

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

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

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

有人能指出我的方向吗？

更新：

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

Answer 1

不确定你遇到麻烦的地方，但是（希望）指出你正确的方向：

您可以在页面上创建两个<select>元素，“城市”下拉列表中包含HTML disabled属性，该属性会将其灰显。

禁用下拉列表除了可能会出现“选择状态”之类的内容外，没有任何选项。

您将向状态下拉菜单中添加onchange事件监听器，该监听器将执行AJAX调用，我建议您在JSON format中回复您的回复。

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

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

Answer 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>';
}
?>

也许适合你

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

2 个答案: