用于绑定mysql数据库表中的州和城市的jquery php代码

Question

我有一个表单，在一个表行中，一个下拉状态字段在那里，在另一个tr中有一个选择城市，我需要在提交表单之前，当用户从下拉列表中自动选择一个州时，城市下拉应从所选的州中提取并显示那些城市。

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

我怎样才能用jquery做到这一点呢?我是个新手，对此我很感激，请帮助我。

Answer 1

如果你不想使用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>

Fiddle

Answer 2

如果希望避免使用ajax调用，则需要构建从state-id到城市列表的映射。然后将一个函数绑定到state select-element的change事件，并用这些值填充city select-element。

假设州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>');
    });
});

示例：http://jsfiddle.net/HQLQU/

用于构建JS-map的php/mysql部分可能是这样的(未经测试！)：

$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);