使用 JSON 数据填充下拉菜单答案

【问题标题】：Populating dropdown menu with JSON Data使用 JSON 数据填充下拉菜单
【发布时间】：2021-04-22 13:57:17
【问题描述】：

我很想使用 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);
    })
  })
})

提前致谢

【问题讨论】：

标签： jquery ajax json cakephp drop-down-menu

【解决方案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) { ... }

【讨论】：

【解决方案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"

【讨论】：

【解决方案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);
    })
  })
})

【讨论】：

【解决方案4】：

如果您可以稍微更改您的响应以返回 JSON 中的 value 和 text 键：

[{
  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

【讨论】：