jquery - 使用 JSON 数据填充下拉菜单

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>';

您将“值”作为索引 - 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) { ... }