Question

我有三个下拉列表：国家，州和城市。

我想根据国家/地区列表中的选择填充州名单，并根据州名单中的选择填充城市列表。

以下是我尝试过的方法

从国家/地区列表中，使用onchage事件我调用java脚本函数。
```
<select name="country" id="id1" onchange="onCountryChange(this.value)">
```

然后我向服务器发送请求以获取与国家/地区相关联的州名称。

function onCountryChange(str){
    if (window.XMLHttpRequest){ 
        xmlhttp=new XMLHttpRequest();
    }
    else{
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("statenames").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","./view/countrychange.php?countryname="+str,true);
xmlhttp.send();
 }

我使用以下代码获取状态值。

<?php
$countryname=$_GET["countryname"];
$connection = pg_connect("host=localhost port=5432 dbname=STAGE2 user=postgres password=jssate");
if (!$connection){
    echo "<H1>Error in connection to Database</H1>";
    echo "<H2>Please try again</H2>.";
}
else{
    $query1="Select distinct(state) from master_table where country='$countryname'";
$result = pg_query($connection,$query1);
$numrows = pg_numrows($result);     
if ($numrows>0){
echo "State <select name="state" id="stateid">;
for ($row_index=0;$row_index<$numrows;$row_index++)
{
    $state_name=pg_result($result,$row_index,0);
    echo "<option value="$state_name\">$state_name</option>";
        }
echo "</select>";
}

}
pg_close($connection);
?>

3.在我的客户端使用以下代码显示结果。

    <div id="statenames">
    //Original select list placed here is replaced by the one returned by server.
    </div>

这对我有用，并且根据国家/地区名称填充州。现在我如何填充第三个列表。我选择用于显示状态列表的方法是否正确？因为我无法控制我现在获得的选择状态列表。

Answer 1

在您的html页面中创建3个选择国家，城市和州选择

只有国家/地区选择元素才有选项，州和城市将为空。
关于国家/地区发送的更改事件和获取状态的ajax请求，并且响应仅发送选项元素不要在选择中包装它们
将这些选项推送到州的选择元素

的document.getElementById（ '州'）的innerHTML（state_ajax_response）;

然后在你的html文件中创建将在状态选择更改时调用的函数，并再次重复城市选择的过程

希望你明白。

只需将选项元素作为回复发送。

填充下拉列表

1 个答案: