使用JSON数据填充下拉菜单

我正在使用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 += '' + j[i].optionDisplay + ''; } $("select#QuoteContactId").html(options); }) }) }) 

提前致谢

Answer 1

你的问题是这一行：

 options += '' + j[i].optionDisplay + ''; 

期待以教程格式发送的数据。 你的格式不同。 尝试：

 options += '' + j[i] + ''; 

您将’value’仅作为索引 – i，并将值作为具有该键的值j [i]。 所以你最终得到的选项标签看起来像这样：

 Kieran Hutchinson 

要解释更多：原始数据的格式如下：

 // 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 += '' + j[key]+ ''; } $("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 += '' + value + ''; }) $("select#QuoteContactId").html(options); }) }) }) 

Answer 4

如果您可以稍微更改您对JSON中的返回值和文本键的响应：

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

你可以使用JQuery视图引擎 ，只需将数组加载到下拉列表中：

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

请在此处查看详细信息： https ： //jocapc.github.io/jquery-view-engine/docs/ajax-dropdown