Question

我有2个下拉菜单。省市。列表中的所有值都来自数据库，我没有列出省内值的问题，因为我可以查询所有值并显示如下：

mysql_connect("localhost", "root","") or die(mysql_error());
mysql_select_db("occ") or die(mysql_error());

$query = "SELECT id, province FROM provinces ORDER BY id ASC ";
$result_province = mysql_query($query) or die(mysql_error()."[".$query."]");

并显示它：

echo "<option value = ''>Choose One</option>"; 
while ($row = mysql_fetch_array($result_province))
{
  echo "<option value=".$row['id'].">".$row['province']."</option>";
}

我的问题是如何展示城市？因为有关系。我的表结构是：

provinces
  ->id
  ->provinces

我有

cities
->id
->city
->provice_id

一个省我有很多城市/城镇。我如何才能确定省份有onChange功能，当我选择一个省时，只有那些城市会出现在属于该省份的城市下拉列表中。

抱歉，我是新人。谢谢！

Answer 1

你可以通过两种方式完成。使用查询将所有城市预加载到JS数组，并将provice_id作为键之一。然后onchange事件可用于Provice选择以填充另一个Cities选择。（Evry time删除Cities选择的所有选项，然后，为选定的Provice添加JS数组中的新选项。）

另一个选择是让AJAX调用onChange，它会将get_id发送到get_cities.php脚本，在那里你可以从数据库城市获取该服务，并以JSON或任何对你有用的方式返回数据。成功ajax呼叫你重新生成第二个选择
这是代码（也许你需要解决一两件事，但一般应该工作）
http://jsfiddle.net/ihrg/7L7Rn/1/

<script type="text/javascript">
    function changeCities(provinceId) {
        var cities = new Array();
        <?php
        $query = "SELECT id, province FROM provinces ORDER BY id ASC ";
        $result_province = mysql_query($query) or die(mysql_error()."[".$query."]");
        while ($row_province = mysql_fetch_array($result_province)) {
            echo 'cities["2"] = [';
            $query = "SELECT id, city FROM cities provice_id'" . $row_province["id"] . "' WHERE ORDER BY id ASC ";
            $result_city = mysql_query($query) or die(mysql_error()."[".$query."]");
            while ($row = mysql_fetch_array($result_city))
            {
                echo '{"value": "' . $row['id'] . ':", "name":"' . $row['city'] . '"},';
            }
            echo '];';
        }
        ?>
        var citiesSelect = document.getElementById("cities");
        citiesSelect.options.length=0;
        var selectedCities = cities[provinceId];
        for(i=0; i<selectedCities.length; i++) {
            citiesSelect.options[citiesSelect.options.length]=new Option(selectedCities[i].name, selectedCities[i].value)
        };
    }
</script>
<select id="provinces" onchange="changeCities(this.value)">
<?php
$query = "SELECT id, province FROM provinces ORDER BY id ASC ";
$result_province = mysql_query($query) or die(mysql_error()."[".$query."]");
echo "<option value = ''>Choose One</option>"; 
while ($row = mysql_fetch_array($result_province))
{
    echo "<option value=".$row['id'].">".$row['province']."</option>";
}
?>
</select>
<select id="cities">
</select>

Answer 2

你可以使用ajax。在你的表单中确保他们的id是form_province和form_city

使用此脚本

<script>
$(document).ready(function() {
    var province_id = '';

    $('#form_province').change(function(){

            province_id = $('#form_province').val();
            send_data_ajax();
        }
    );


    function send_data_ajax()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("form_city").innerHTML=xmlhttp.responseText;
            }

        }

        xmlhttp.open("POST","handle.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("province_id=" + province_id);

    }

});

</script>

你的handle.php代码中的

从province_id获取post值。使用这个

<?php
 $province_id = (!empty($_POST['province_id'])) ? $_POST['province_id'] : ' 1=1 ';

$query = "SELECT * FROM City WHERE province_id = " . $province_id;
$result_city = mysql_query($query) or die(mysql_error()."[".$query."]");

$result_html = "";
$result_html .= "<option value = ''>Choose One</option>"; 
while ($row = mysql_fetch_array($result_city))
{
  $result_html .= "<option value=".$row['id'].">".$row['city']."</option>";
}

echo $result_html;

?>

结果将在您的表单选项上设置。

我希望这会对你有所帮助。

数据库和更新列表onChange中的下拉菜单值

2 个答案: