Question

我正在使用AJAX根据另一个下拉列表的选择来填充下拉框。我使用位于此处的jQuery跟踪了一个教程 - http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/并更改了脚本中选择框名称中的选择框ID名称。

如果主复选框的值发生变化，则发送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>';

您将'value'作为索引 - 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的更多信息，请参阅此文章 - "Mastering 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

使用JSON数据填充下拉菜单

4 个答案: