CODEWITHSUNDEEP
jquery
Sush
Sush

Reputation: 1457

jquery code to get values on dropdown menu based on another dropdown selection

i have a json data like this

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

    }
  ]

}

and two dropdwon menus

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

while selecting os name Windows 7 in first dropdown meanu corresponding adapter name Win 9 shold be selected in the adapter combo

same as when selecting Windows jj7 i have to automatically select adapter Winjjjjj 9 in adapter dropdown. How it is possible?

Upvotes: 0

Views: 78

Answers (1)

gpopoteur
gpopoteur

Reputation: 1519

You could bind a change event to the #ops select, and when it changes filter the data to load it to the second select.

Added jsfiddle with the solution. http://jsfiddle.net/x3Jgj/1/

I did it using the jquery each method to filter the data, but I recommend you use a tool like underscore.js.

Upvotes: 1

Related Questions