javascript - 来自数据库的下拉菜单值和更新列表 onChange

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 函数，并且当我选择一个省份时，只有那些城市才会出现在通过省份 ID 属于该省份的城市下拉列表中。

抱歉，我是新人。谢谢!

Answer 1

你可以使用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;

?>

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

希望这对您有帮助。