0

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

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

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

到目前为止，我所做的只是让状态选择并在执行 ajax 时，从 XMLHttp.ResponseText 创建城市选择。此处的示例Dorpdown 列表示例 - 在页面底部。

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

有人可以指出我的方向吗？

更新：

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

4

2 回答 2

1

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

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

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

您将onchange在 State 下拉列表中添加一个事件侦听器，该侦听器将执行 AJAX 调用，我建议您以JSON 格式获取响应。

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

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

于 2013-07-03T17:09:54.087 回答
0

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

在头部：

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

也许对你有用

于 2013-07-03T17:53:49.173 回答