使用JSON数据填充下拉菜单

小编典典

使用JSON数据填充下拉菜单

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

提前致谢

阅读 360

2020-07-27

共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) { ... }

2020-07-27