Заполнение выпадающего меню данными JSON

Question

Я пытаюсь использовать AJAX для заполнения раскрывающегося списка на основе выбора другого раскрывающегося списка. Я следовал руководству, используя jQuery, расположенный здесь - http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/, и изменил имена идентификаторов блока выбора в именах блока выбора в скрипте.

При изменении значения основного флажка ajax отправляется и возвращается, как показано ниже:

{"1":"Kieran Hutchinson","2":"Caleb Tan","3":""}

Это немного отличается от строки JSON, возвращаемой в коде учебника, который выглядит следующим образом

[{optionValue:10, optionDisplay: 'Remy'}, {optionValue:11, optionDisplay: 'Arif'}, {optionValue:12, optionDisplay: 'JC'}]

Я думаю, что это проблема, но я не знаю, как получить правильные значения из моего ответа JSON.

JavaScript как ниже:

$(function(){
            $("select#ContactCompanyId").change(function(){
              $.getJSON("contactList",{id: $(this).val(), ajax: 'true'}, function(j){
                var options = '';
                for (var i = 0; i < j.length; i++) {
                  options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
            }
                $("select#QuoteContactId").html(options);
                })
            })
        })  

Заранее спасибо

Answer 1

Ваша проблема в этой строке:

options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';

ожидает данные, отправленные в формате учебника. У тебя другой формат. Попробуйте:

options += '<option value="' + i + '">' + j[i] + '</option>';

У вас есть «значение» как просто индекс - i, а значение как значение с этим ключом, j [i]. поэтому тег опции, с которым вы в конечном итоге окажетесь, будет выглядеть так:

<option value="1">Kieran Hutchinson</option>

Чтобы объяснить больше: исходные данные были в таком формате:

// The tutorial data
array[0]['optionValue'] = 10;
array[0]['optionDisplay'] = 'Remy';

// Your data
array[1] = 'Kieran Hutchinson';

также, если это были фактические данные, возвращенные в вашем примере, ваш итератор for (var i = 0; i < j.length; i++) завершится ошибкой, потому что вы не начинаете с индекса 0. Используйте for(i in j) { ... }

Answer 2

Поскольку JSON также можно рассматривать как ассоциативный массив, вы можете сделать что-то вроде этого:

$(function(){
        $("select#ContactCompanyId").change(function(){
          $.getJSON("contactList",{id: $(this).val(), ajax: 'true'}, function(j){
            var options = '';
            for (key in j) {
                options += '<option value="' + key + '">' + j[key]+ '</option>';
            }
            $("select#QuoteContactId").html(options);
            })
        })
})  

Более подробную информацию о JSON можно найти в этой статье - "Мастеринг JSON"

Answer 3

Если массив не начинается с индекса 0, он преобразуется в объект JSON с ключами и значениями вместо массива. Просто используйте $.each для циклического прохождения, захвата ключа (то есть 1) и значения (то есть Kieran Hutchinson):

$(function(){
  $("select#ContactCompanyId").change(function(){
    $.getJSON("contactList",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      $.each(j, function(key, value){
        options += '<option value="' + key + '">' + value + '</option>';
      })
      $("select#QuoteContactId").html(options);
    })
  })
})  

Answer 4

Если бы вы могли немного изменить свой ответ, чтобы вернуть значение и текст ключи в формате JSON:

[{value:10, text: 'Remy'}, {value:11, text: 'Arif'}, {value:12, text: 'JC'}]

вы можете использовать JQuery view engine и просто загрузить массив в выпадающий список:

 $.getJSON("contactList",
           {id: $(this).val(), ajax: 'true'},
           function(j){
                $("select#QuoteContactId").view(response);
           })

Подробнее см. Здесь: https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown