jquery代码,用于根据另一个下拉选择获取下拉菜单中的值

时间:2014-02-18 09:27:29

标签: jquery

我有像这样的json数据

{
  "VMs":[
    {
      "ID":"VM-WIN7-64",
      "OS":"Windows 7",
      "FLAVOUR":"VM-IE8-001-preq",
      "ADAPTER":"Win 9",
      "Paths":"D:\\VirtualMachines\\Win7_X64_VM-001\\Win7_X64_VM-001.vmx"

    },
{
      "ID":"VM-WIN7-6",
      "OS":"Windows jj7",
      "FLAVOUR":"VM-IE8-001-preq",
      "ADAPTER":"Winjjjjj 9",
      "Paths":"f:\\VirtualMachines\\Win7_X64_VM-001\\Win7_X64_VM-001.vmx"

    }
  ]

}

和两个dropdwon菜单

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





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

    $('#ops').html("");
    $('#adapter').html("");
    $('#ops').html(os);
    $('#adapter').html(adapter);

在第一个下拉列表中选择操作系统名称Windows 7时,在适配器组合中选择相应的适配器名称Win 9 shold

与选择Windows jj7时相同,我必须在适配器下拉列表中自动选择适配器Winjjjjj 9。 怎么可能?

1 个答案:

答案 0 :(得分:1)

您可以将change事件绑定到#ops选项,当它更改时会过滤数据以将其加载到第二个选择。

为解决方案添加了jsfiddle。 http://jsfiddle.net/x3Jgj/1/

我使用jquery each方法来过滤数据,但我建议你使用像 underscore.js 这样的工具。