使用 jQuery 解析 JSON 对象并使用该数据创建两个下拉列表答案

【问题标题】：Parsing a JSON object with jQuery and creating two drop down lists with that data使用 jQuery 解析 JSON 对象并使用该数据创建两个下拉列表
【发布时间】：2010-09-10 08:48:16
【问题描述】：

我正在尝试动态创建两个下拉列表，一个是省份，另一个将包含每个省的城市，所以当用户选择一个省份时，城市下拉列表将填充，我使用的是 jQuery 的 $ .ajax 函数从数据库中获取数据，然后将其作为 JSON 传回，这就是我目前所拥有的，

jQuery:

$.getJSON("provinces.php", function(data){

//clean out the select list
$('#province').html('');

    //run the loop to populate the province drop down list
    $.each(data, function(i, json) {
        var province = json.province;
        var cities = json.cities;

        $('#province').append(
            $('<option></option>').html(province)
        );

    });
});

JSON 的片段：

[
 {"province":"Eastern Cape","cities":"Mthatha,Njoli,Port Alfred,Port Elizabeth,Queenstown,Uitenhage"},
 {"province":"Freestate","cities":"Thaba Nchu,Virginia,Welkom"}
]

我正在填充省份下拉列表，而不是城市下拉列表。

我想听听你们认为最好的方法是实现城市下拉。

【问题讨论】：

标签： php jquery mysql json

【解决方案1】：

将 json 存储在某处，即使用 $('...').data(key, value)。

为省份的变化事件添加触发器： $('#province').live('change', function() {…})

触发时从省 $('#province').val() 获取值并使用它来获取城市。循环出城市作为城市选择器的选项（与上面展示的技术相同）。

默认情况下，选择的城市是显示为空还是完全隐藏，由您决定。

（根据省份的数量[数据量]，您还可以在 html 中创建所有选择并简单地切换它们的显示）

希望这会有所帮助！

【讨论】：

【解决方案2】：

复制并开始；）

它像你一样填充省域...另外还有一个创建的地图（省 -> 城市）。省份选择字段获得一个 onChange 监听器。如果可用，侦听器会从地图中提取城市并将它们设置到城市选择框中。


$(function() {
    var data = [
     {"province":"Eastern Cape","cities":"Mthatha,Njoli,Port Alfred,Port Elizabeth,Queenstown,Uitenhage"},
     {"province":"Freestate","cities":"Thaba Nchu,Virginia,Welkom"}
    ]

    var map = {};

    $('#cities').attr('disabled', 'disabled');

    $(data).each(function(i, data) {
        map[data.province] = data.cities.split(',');
        $('#provinces').append('<option value="' + data.province + '">'+data.province+"</option>");
    });

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


        var disable = function() {
            $('#cities')
                .html('<option>select city</option>')
                .attr('disabled', 'disabled');
        }

        var enable = function() {
            $('#cities')
                .removeAttr('disabled', 'false')
                .html('');

        }

        if (!$(this).val()) {
            disable();
            return;
        }
        else if (typeof map[$(this).val()] == 'undefined') {
            alert('invalid city');
            disable();
            return;
        }

        enable();

        $(map[$(this).val()]).each(function(i, city) {
            $('#cities').append(
                $('<option></option>')
                    .text(city)
                    .val(city)
            );
        });
    });
});

【讨论】：