Анализ объекта JSON с помощью jQuery и создание двух раскрывающихся списков с этими данными

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

Скопируй и иди;)

Он заполняет поле провинции так же, как и вы ... дополнительно создается карта (провинция -> города). Поле выбора провинции получает прослушиватель 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)
            );
        });
    });
});

Answer 2

Сохраните json где-нибудь, т. Е. Используя $ ('…'). Data (ключ, значение).

Добавить триггер для события изменения провинции: $ ('# провинция'). live ('изменение', функция () {…})

При срабатывании получить значение из провинции $ ('# провинция'). Val () и использовать его для получения городов. Выделите города в качестве опций для выбора города (та же техника, что была показана выше).

Независимо от того, выбраны ли выбранные города, по умолчанию они пусты или полностью скрыты.

(В зависимости от количества провинций [объем данных] вы также можете создавать все выборки в формате HTML и просто переключать их отображение)

Надеюсь, это поможет!