Dynamic <select> dropdown using Javascript

Question

I have a HTML page with three dropdowns. Based on the first dropdown, options in the second will be displayed. I achieved it using the below code which I found online and its working as expected.

Could someone help me in filtering the third dropdown based on first and second. As the list is huge up to 300+ options, trying to find a simple JSP to accomplish this.

 $(function() { $('#catagory').on('change', function() { var val = $(this).val(); var sub = $('#family'); $('option', sub).filter(function() { if ( $(this).attr('data-group') === val || $(this).attr('data-group') === 'SHOW' ) { $(this).show(); } else { $(this).hide(); } }); }); $('#catagory').trigger('change'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <tr> <th class="nwaLeft"> <label>Select Catagory:</label> </th> <td class="nwaBody"> <span style="height:0;"> <select name="catagory" id="catagory" style="width: 240px;"> <option selected disabled>Select Device Catagory</option> <option value="Access Points">Access Points</option> <option value="Audio/Video Devices">Audio/Video Devices</option> <option value="Automobile">Automobile</option> <option value="Barcode Scanner">Barcode Scanner</option> <option value="Biometric Devices">Biometric Devices</option> !!!Truncated output!!! </select> </span> </td> </tr> <tr> <th class="nwaLeft"> <label>Select Family:</label> </th> <td class="nwaBody"> <span style="height:0;"> <select name="family" id="family"> <option data-group='SHOW' value='0'>-- Select --</option> <option data-group="Access Points" value="AeroHive">AeroHive</option> <option data-group="Access Points" value="Aruba">Aruba</option> <option data-group="Audio/Video Devices" value="Barco">Barco</option> <option data-group="Audio/Video Devices" value="Behringer">Behringer</option> <option data-group="Automobile" value="Tesla">Tesla</option> <option data-group="Barcode Scanner" value="Intermec">Intermec</option> <option data-group="Barcode Scanner" value="Symbol">Symbol</option> <option data-group="Biometric Devices" value="Suprema">Suprema</option> !!!Truncated output!!! </select> </span> </td> </tr> 

Third dropdown should filter based on the first and the second selection.

Please help me with your suggestions along with sample codes.

The listed sample has different ID to filter options. As I need the third dropdown options to be in the same ID, provided example may not help.

Answer 1

Filtering down your third list isn't any different from filtering down the second list. In fact, if you apply your attributes in a structured way, you can do all the work in one event handler.

Here's a running example:

 $("[data-child]").change(function() { //store reference to current select var me = $(this); //get selected group var group = me.find(":selected").val(); //get the child select by it's ID var child = $("#" + me.attr("data-child")); //hide all child options except the ones for the current group, and get first item var newValue = child.find('option').hide().not('[data-group!="' + group + '"]').show().eq(0).val(); child.trigger("change"); //set default value child.val(newValue); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="catagory" data-child="family"> <option selected disabled>Select Device Catagory</option> <option value="Access Points">Access Points</option> <option value="Audio/Video Devices">Audio/Video Devices</option> <option value="Automobile">Automobile</option> <option value="Barcode Scanner">Barcode Scanner</option> <option value="Biometric Devices">Biometric Devices</option> </select> <select id="family" data-child="item"> <option data-group='SHOW' value='0'>-- Select --</option> <option data-group="Access Points" value="AeroHive">AeroHive</option> <option data-group="Access Points" value="Aruba">Aruba</option> <option data-group="Audio/Video Devices" value="Barco">Barco</option> <option data-group="Audio/Video Devices" value="Behringer">Behringer</option> <option data-group="Automobile" value="Tesla">Tesla</option> <option data-group="Barcode Scanner" value="Intermec">Intermec</option> <option data-group="Barcode Scanner" value="Symbol">Symbol</option> <option data-group="Biometric Devices" value="Suprema">Suprema</option> </select> <select id="item"> <option data-group='SHOW' value='0'>-- Select --</option> <option data-group="AeroHive" value="AeroHive1">AeroHive 1</option> <option data-group="AeroHive" value="AeroHive2">AeroHive 2</option> <option data-group="AeroHive" value="AeroHive3">AeroHive 3</option> <option data-group="Aruba" value="Aruba">Aruba</option> <option data-group="Barco" value="Barco1">Barco 1</option> <option data-group="Barco" value="Barco2">Barco 2</option> <option data-group="Behringer" value="Behringer1">Behringer 1</option> <option data-group="Behringer" value="Behringer2">Behringer 2</option> <option data-group="Behringer" value="Behringer3">Behringer 3</option> <option data-group="Behringer" value="Behringer4">Behringer 4</option> <option data-group="Tesla" value="Tesla">Tesla</option> <option data-group="Intermec" value="Intermec">Intermec</option> <option data-group="Symbol" value="Symbol">Symbol</option> <option data-group="Suprema" value="Suprema">Suprema</option> </select>