Question

我正在尝试动态创建两个下拉列表，一个将是省，另一个将包含每个省的城市，因此当用户选择省时，城市下拉将填充，我使用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"}
]

我在各省的人口下降，但城市没有下降。

我想听听各位你们认为实现城市下降的最佳方法。

Answer 1

将json存储在某处，即使用$（'...'）。data（key，value）。

为省份的更改事件添加触发器： $（'＃province'）。live（'change'，function（）{...}）

触发时从省$（'＃province'）。val（）获取值并使用它来获取城市。将城市作为城市选择器的选项进行循环（与上面显示的技术相同）。

默认显示城市选择是否为空或完全隐藏是由您决定的。

（根据省份数量[数据量]，您还可以在html中创建所有选择，只需切换显示）

希望这有帮助！

Answer 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)
            );
        });
    });
});

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

2 个答案: