jquery php代码从mysql数据库表绑定州和城市

我有一个表格，其中在一个表格行中有一个下拉状态字段，在另一个tr中有另一个下拉列表用于选择城市，我需要在提交表格之前，当用户从下拉列表中自动选择一个状态时，城市下拉列表应仅从所选状态获取并显示这些城市

我不想使用AJAX，但想使用jquery。 后端数据库有两个表，一个是state，有两个id和state字段，第二个是city表，有3个id、state和city字段，其中state是我的外键

---

我如何使用jquery实现这一点我非常感谢您的帮助，因为我是一名新手，请帮助我

如果您不想使用ajax，您可以随时将包含城市的完整州列表预加载到javascript对象中，并从那里调用它

例如：

<select id="stateDrop">
    <option value="state1">State 1</option>
    <option value="state2">State 2</option>
</select>
<select id="cityDrop"></select>
    <script>
    var cities = {'state1':['city_one', 'city_two', 'city_three'], 'state2':['city_four', 'city_five', 'city_six']};
    $('#stateDrop').on('change', function(){
        var cityList = cities[$(this).val()];
        console.log(cityList);
        var output = '';
        $(cityList).each(function(k, v){
            output += '<option value="'+v+'">'+v+'</option>';
        });
        $('#cityDrop').html(output);
    });
    </script>

---

如果希望避免使用ajax调用，则需要构建从州id到城市列表的映射。然后将函数绑定到状态选择元素的更改事件，并用值填充城市选择元素

假设州ID 0具有城市A和B，城市ID为0和1：

var map = [[{id:0,name:"A"},{id:1,name:"B"}]]            
$("#states").on("change",function() {
    var cities = map[$(this).val()];
    $("#cities option").remove(); //remove previous options
    $.each(cities, function(i,e) {
        $("#cities").append('<option value="'+e.id+'">'+e.name+'</option>');
    });
});

---

Jquery包括Ajax。。。你为什么不使用它呢？如果你不能使用它。。。您可以在启动页面之前加载所有内容，比如php服务器端并将其放入Javascript变量，或者您可以在用户选择第一个下拉菜单时更改框架或iframe。您可以为我提供一些代码，我是指一些演示。请注意，您的代码看起来不错，但我的州和城市是动态值。我如何在表中的变量中动态分配城市？在本例中，变量“cities”填充了硬编码数据。您可以在初始pageload中执行单个数据库获取，并以JSON字符串发布从该页面返回的结果。然后将所述字符串指定给“cities”变量。

$query = "SELECT city_id, city_name, state_id FROM cities";
$result = mysql_query($query); //or preferably use a more modern extension
$cities = array();
foreach (mysql_fetch_assoc($result) as $row) {
    $cities[$row['state_id']][] = array("id"=>$row['city_id'],"name"=>$row['city_name']);
}
echo "var map = " . json_encode($cities);