Question

我有像这样的josn数据

{
  "VMs":[
    {
      "ID":"VM-WIN7-32",
      "OS":"Windows 7-32",
      "ADAPTER":[{"ID":"adap01", "name":"Linksys Wireless-G USB Network Adapter", "paths":"D:\\VirtualMachines\\Win7_X86_VM-001\\Win7_X86_VM-001.vmx","SNAPSHOT":"Wi-Fi-Test"}],
      "DUIConfig":[{"ID":"dui01", "name":"DGI","description":"dui description"}]    

    }, {
      "ID":"VM-WIN764",
      "OS":"Windows 7-64",
      "ADAPTER":[{"ID":"adap02", "name":"222Linksys Wireless-G USB Network Adapter", "paths":"E:\\VirtualMachines\\Win7_X86_VM-001\\Win7_X86_VM-001.vmx","SNAPSHOT":"Wi-Fi-Test"}],
      "DUIConfig":[{"ID":"dui02", "name":"2ddDGI","description":"2 dui description"}]   

    }
  ]

}

我有3个下拉列表。选择操作系统"Windows 7-32"对应的adapter名称和DUIConfig名称应加载到相应的dropdon列表中，我正在使用以下code.it正在选择第一个os，而在从下拉列表中选择第二个os时无法正常工作

TypeError: data.VMs[i].ADAPTER[i] is undefined


...option value="' + data.VMs[i].ADAPTER[i].ID + '">' + data.VMs[i].ADAPTER[i].names.

码

$("#ops").change(function () {
    var adapter = "", dui="";
    var selected = $(this).val();
    $.getJSON('/json/data.json', function (data) {
      $.each(data.VMs, function (i) {
        if (data.VMs[i].ID === selected) {

          adapter += '<option value="' + data.VMs[i].ADAPTER[i].ID + '">' + data.VMs[i].ADAPTER[i].names + '</option>';  
          dui += '<option value="' + data.VMs[i].DUIConfig[i].ID + '">' + data.VMs[i].DUIConfig[i].names + '</option>';

        }
      });

      $('#adapter').html(adapter);
    $('#dui').html(dui);
    });
  });

  $.getJSON('/json/data.json', function (data) {
    var os = '<option value="">SELECT </option>';
    var adapter = '<option value="">SELECT </option>';
    $.each(data.VMs, function (i) {
      os += '<option value="' + data.VMs[i].ID + '">' + data.VMs[i].OS + '</option>';

      adapter += '<option value="' + data.VMs[i].ADAPTER[i].ID + '">' + data.VMs[i].ADAPTER[i].names + '</option>';
    });
    $('#ops').html(os);
    $('#adapter').html(adapter);
  });
}

htmlcode

 <tr>
            <td width="200px">
              Operating Systems : 
            </td>
            <td colspan="2">
              <select id="ops" class="longcombo">
              </select>
            </td>
          </tr>

          <tr>
            <td width="200px">
             Adapter :
            </td>
            <td colspan="2">
              <select id="adapter" class="longcombo">
              </select>
            </td>
          </tr>
 <tr>
            <td width="200px">
             DUI Config :
            </td>
            <td colspan="2">
              <select id="dui" class="longcombo">
              </select>
            </td> <td colspan="2" id="showdes">

            </td>
          </tr>

jfidle但此代码会加载任何内容....

我的代码有什么问题 “

Answer 1

您需要使用data.VMs[i].ADAPTER[0]，因为ADAPTER数组只有一个值，DUIConfig也是

adapter += '<option value="' + data.VMs[i].ADAPTER[0].ID + '">' + data.VMs[i].ADAPTER[0].names + '</option>';

此外，您将获取当前对象作为每个处理程序的第二个参数，因此无需在每个处理程序中使用索引

$("#ops").change(function () {
    var adapter = [],
        dui = [];
    var selected = $(this).val();
    $.getJSON('/json/data.json', function (data) {
        //you will get the current VM as the second parameter, so no need to access it using index again
        $.each(data.VMs, function (i, vm) {
            if (vm.ID === selected) {

                adapter.push('<option value="' + vm.ADAPTER[0].ID + '">' + data.VMs[i].ADAPTER[0].names + '</option>');
                dui.push('<option value="' + vm.DUIConfig[0].ID + '">' + data.VMs[i].DUIConfig[0].names + '</option>');

            }
        });

        $('#adapter').html(adapter.join(''));
        $('#dui').html(dui.join(''));
    });
});

演示：Fiddle

显示从json到下拉列表的值

1 个答案: