cakephp 使用JSON数据填充下拉菜单

3zwjbxry  于 2022-11-11  发布在  PHP
关注(0)|答案(4)|浏览(171)

我正在尝试使用 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);
    })
  })
})

先谢谢你

1mrurvl1

1mrurvl11#

你的问题是这一行:

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开始。

tct7dpnv

tct7dpnv2#

因为JSON也可以被看作是关联数组,所以可以像这样执行smth:

$(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"

inb24sb2

inb24sb23#

如果一个数组不是以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);
    })
  })
})
fjaof16o

fjaof16o4#

如果您可以稍微更改响应以返回JSON格式的valuetext键:

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

相关问题