javascript - 从数据库和更新列表中的下拉菜单值更改

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

对不起，我是新来的。谢谢！

最佳答案

您可以使用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获取帖子值。用这个

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

?>

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

希望对您有所帮助。

关于javascript - 从数据库和更新列表中的下拉菜单值更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23272630/