Раскрывающийся список города Цепной штат от JSON

Question

Я пытаюсь заполнить цепочки выпадающих списков State City.Для этого я использую внешний файл json, который состоит из штата и соответствующего названия города, идентификатора и пин-кода.Может кто-нибудь дать мне идею о том, как этого добиться.Мне нужно заполнить город и значение пин-кода на основе выбора штата.Заранее спасибо ...

JSON

{
"Alaska" : [
            {"id": "1", "name": "Adak", "pincode": "xxx1"},
            {"id": "2", "name": "Akhiok", "pincode": "xxx2" },
            {"id": "3", "name": "Akiak", "pincode": "xxx3" },           
       ],

"Arizona" : [
            {"id": "4", "name": "Apache Junction", "pincode": "xxx4"},
            {"id": "5", "name": "Avondale", "pincode": "xxx5"},
            {"id": "6", "name": "Benson", "pincode": "xxx6"},
        ],

"Alabama" : [
            {"id" : "5", "name": "Abbeville", "pincode": "xxx7" },
            {"id" : "7", "name": "Adamsville", "pincode": "xxx8" },
            {"id" : "8", "name": "Akron", "pincode": "xxx9" },
        ]
}

Окончательный вариант HTML

<select id="state">
      <option value="1">Alaska</option>
      <option value="2">Arizona</option>
      <option value="3">Alabama</option>
      </select>

      <select id="city">
      <option value="4">Adak</option>
      <option value="5">Akhiok</option>
      <option value="6">Akiak</option>
      </select>

      <input id="pincode" type="text" />

Answer 1

Я нахожу ваш вопрос интересным и написал соответствующее решение, которое вы можете увидеть вживую здесь .

Вот код:

jQuery(document).ready(function () {
    var myData;
    var onCityChange = function (e) {
        var cityData = $("option:selected", e.target).data('pincode');
        $("#pincode").val(cityData.pincode);
    };
    var onStateChange = function (e) {
        var state = $("option:selected", e.target).text();
        if (state && myData) {
            var stateData = myData[state];
            if (stateData && stateData.length > 0) {
                $("#city").empty();
                $("#city").unbind('change');
                for (var i = 0; i < stateData.length; i++) {
                    var cityData = stateData[i];
                    var option = $('<option value="' + cityData.id + '">' + cityData.name + '</option>')
                                    .data('pincode', cityData);
                    $("#city").append(option);
                }
                $("#city").bind('change', onCityChange)
                            .trigger('change');
            }
        }
    };
    $.ajax({
        url: 'DependendSelectsFromJson.json',
        dataType: 'json',
        success: function (data) {
            var stateOptions = "", stateId = 1;
            for (var prop in data) {
                if (data.hasOwnProperty(prop)) {
                    stateOptions += '<option value="' + stateId + '">' + prop + '</option>';
                    stateId++;
                }
            }
            myData = data;
            $("#state").html(stateOptions)
                .bind('change', onStateChange)
                .trigger('change');
        }
    });
});

чтобы получить доступ к pincode во втором (городском) окне выбора, я использовал jQuery.data , что я считаю очень практичным, если нужно связать некоторую дополнительную информацию с элементом DOM. В пути можно было сохранить только значение pincode, но я использовал функцию для сохранения полной информации о городе.

ОБНОВЛЕНО : Я забыл упомянуть, что опубликованные вами данные JSON содержат ошибки. Вы должны удалить запятые перед ']'. Возможно, это просто проблема с вырезанием и вставкой данных в текст вопроса.

Answer 2

Есть много способов.

опция глобальной переменной.

var json_object = {
"Alaska" : {}

}; //and the rest of other text too lazy to type :)

$('#state').change(function(){
  var state =  $(this).val();
  cities = json_object[state];
  $('#city').html('');//remove the prev elements
  for(item in cities){//same as foreach in php
     $('<option value=""></option>').appendTo($('#city'));
  }
});

Я должен признать, что не завершен, но дает вам грубую идею.

Другое мудрое использование ajaxвот так

$('#state').change(function(){
    var url = 'ajax.php';//should return json with a list of cities only
    var state = $('#state').val();
    var data = {'state':state};
    $.ajax({
        url:url,
        data:data,
        dataType:'json',
        success: function(items){
            //do something with it
        }
    })
});

Единственное, что вам нужно знать, это то, что оба имеют свои преимущества и недостатки.

первый вариант: может выполнить только один запрос, но загружает до * загрузки данных, которыене нужны.второй вариант: делает больше запросов, но меньше данных