動態 <select>使用Javascript下拉菜單

Question

我有一個帶有三個下拉菜單的HTML頁面。 根據第一個下拉菜單，將顯示第二個選項。 我使用下面的代碼在網上找到了它，並按預期工作，實現了它。

有人可以幫助我根據第一個和第二個過濾第三個下拉列表。 由於列表多達300多個，因此請嘗試尋找一個簡單的JSP來完成此任務。

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

第三個下拉列表應根據第一個和第二個選擇進行過濾。

請幫助我提供您的建議以及示例代碼。

列出的樣本具有不同的ID來過濾選項。 由於我需要第三個下拉選項使用相同的ID，因此提供的示例可能無濟於事。

Answer 1

過濾您的第三個列表與過濾第二個列表沒有什么不同。 實際上，如果您以一種結構化的方式應用屬性，則可以在一個事件處理程序中完成所有工作。

這是一個正在運行的示例：

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