动态< select>使用Javascript下拉菜单 [英] Dynamic <select> dropdown using Javascript
问题描述
我有一个包含三个下拉列表的HTML页面。根据第一个下拉菜单，将显示第二个选项。我用下面的代码实现了它，我在网上找到它，并按预期工作。
有人可以帮助我根据第一个和第二个筛选第三个下拉菜单。由于列表超过300多个选项，试图找到一个简单的JSP来完成此任务。
$（function（）{$（'＃catagory'）。on < pre class =snippet-code-html lang-html prettyprint-override> < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery .min.js>< /脚本>< TR> < th class =nwaLeft> < label>选择类别：< / label> < /第> < td class =nwaBody> < span style =height：0;> < select name =catagoryid =catagorystyle =width：240px;>< option selected disabled> Select Device Catagory< / option>< option value =Access Points> Access Points< / option>< option value =音频/视频设备>音频/视频设备< / option><选项值=汽车>汽车< / option>< option value =条码扫描仪> Barcode Scanner< / option>< option value =Biometric Devices> Biometric Devices< / option> !!!截断输出!!! < /选择> < /跨度> < / TD>< / TR>< TR> < th class =nwaLeft> < label>选择系列：< / label> < /第> < td class =nwaBody> < span style =height：0;> < select name =familyid =family>< option data-group ='SHOW'value ='0'> - 选择 - < / option>< option data-group =接入点value =AeroHive> AeroHive< / option>< option data-group =接入点value =Aruba> Aruba< / option>< option data-group = value =Barco> Barco< / option>< option data-group =Audio / Video Devicesvalue =Behringer> Behringer< / option>< option data-group =Automobilevalue = Tesla> Tesla< / option>< option data-group =Barcode Scannervalue =Intermec> Intermec< / option>< option data-group =Barcode Scannervalue =Symbol> ; Symbol< / option>< option data-group =Biometric Devicesvalue =Suprema> Suprema< / option> !!!截断的输出！ < /选择> < /跨度> < / td>< / tr>
基于第一和第二选择进行过滤。
请随我们一起提供您的建议以及示例代码。
列出的示例具有不同的ID以过滤选项。因为我需要第三个下拉选项在相同的ID，提供的例子可能没有帮助。
过滤第三个列表与第二个列表过滤没有任何区别。事实上，如果您以结构化的方式应用您的属性，您可以在一个事件处理程序中完成所有工作。
以下是一个正在运行的示例：
< script src =https： //ajax.googleapis.com/ajax/libs/jquer y / 1.11.1 / jquery.min.js>< / script>< select id =catagorydata-child =family> <禁用选项>选择设备类别< / option> < option value =访问点>访问点< / option> < option value =音频/视频设备>音频/视频设备< / option> < option value =Automobile> Automobile< / option> < option value =条码扫描器>条码扫描器< / option> < option value =Biometric Devices> Biometric Devices< / option>< / select>< select id =familydata-child =item> < option data-group ='SHOW'value ='0'> - 选择 - < / option> < option data-group =Access Pointsvalue =AeroHive> AeroHive< / option> < option data-group =Access Pointsvalue =Aruba> Aruba< / option> < option data-group =Audio / Video Devicesvalue =Barco> Barco< / option> < option data-group =Audio / Video Devicesvalue =Behringer> Behringer< / option> < option data-group =Automobilevalue =Tesla> Tesla< / option> < option data-group =Barcode Scannervalue =Intermec> Intermec< / option> < option data-group =Barcode Scannervalue =Symbol>符号< / option> < option data-group =Biometric Devicesvalue =Suprema> Suprema< / option>< / select>< select id =item> < option data-group ='SHOW'value ='0'> - 选择 - < / option> < option data-group =AeroHivevalue =AeroHive1> AeroHive 1< / option> < option data-group =AeroHivevalue =AeroHive2> AeroHive 2< / option> < option data-group =AeroHivevalue =AeroHive3> AeroHive 3< / option> < option data-group =Arubavalue =Aruba> Aruba< / option> < option data-group =Barcovalue =Barco1> Barco 1< / option> < option data-group =Barcovalue =Barco2> Barco 2< / option> < option data-group =Behringervalue =Behringer1> Behringer 1< / option> < option data-group =Behringervalue =Behringer2> Behringer 2< / option> < option data-group =Behringervalue =Behringer3> Behringer 3< / option> < option data-group =Behringervalue =Behringer4> Behringer 4< / option> < option data-group =Teslavalue =Tesla> Tesla< / option> < option data-group =Intermecvalue =Intermec> Intermec< / option> < option data-group =Symbolvalue =Symbol>符号< / option> < option data-group =Supremavalue =Suprema> Suprema< / option>< / select>
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.
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>
这篇关于动态< select>使用Javascript下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
