Question

我有一个包含三个下拉列表的HTML页面。根据第一个下拉列表，将显示第二个下拉列表中的选项。我使用下面的代码实现了它，我在网上找到它并按预期工作。有人可以帮助我根据第一个和第二个过滤第三个下拉列表。由于列表中有多达300多个选项，因此尝试找到一个简单的JSP来完成此任务。 $（function（）{ $（'＃catagory'）。on（'change'，function（）{ var val = $（this）.val（）; var sub = $（'＃family'）; $（'option'，sub）.filter（function（）{ 如果（ $（this）.attr（'data-group'）=== val || $（this）.attr（'data-group'）==='SHOW' ）{ $（本）.show（）; } else { $（本）.hide（）; } }）; }）; $（ '＃产品类别'）的触发器（ '变化'）。 }）; ＆lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”＆gt;＆lt; / script＆gt; ＆LT; TR＆GT; ＆lt; th class =“nwaLeft”＆gt; ＆lt; label＆gt;选择Catagory：＆lt; / label＆gt; ＆LT; /第＆GT; ＆lt; td class =“nwaBody”＆gt; ＆lt; span style =“height：0;”＆gt; ＆lt; select name =“catagory”id =“catagory”style =“width：240px;”＆gt; ＆lt;选项已禁用＆gt;选择设备分类＆lt; /选项＆gt; ＆lt; option value =“接入点”＆gt;接入点＆lt; / option＆gt; ＆lt; option value =“音频/视频设备”＆gt;音频/视频设备＆lt; /选项＆gt; ＆lt; option value =“Automobile”＆gt; Automobile＆lt; / option＆gt; ＆lt; option value =“Barcode Scanner”＆gt; Barcode Scanner＆lt; / option＆gt; ＆lt; option value =“Biometric Devices”＆gt; Biometric Devices＆lt; / option＆gt; !!!截断输出!!! ＆LT; /选择＆GT; ＆LT; /跨度＆GT; ＆LT; / TD＆GT; ＆LT; / TR＆GT; ＆LT; TR＆GT; ＆lt; th class =“nwaLeft”＆gt; ＆lt; label＆gt;选择系列：＆lt; / label＆gt; ＆LT; /第＆GT; ＆lt; td class =“nwaBody”＆gt; ＆lt; span style =“height：0;”＆gt; ＆lt; select name =“family”id =“family”＆gt; ＆lt; option data-group ='SHOW'value ='0'＆gt; - 选择 - ＆lt; / option＆gt; ＆lt; option data-group =“Access Points”value =“AeroHive”＆gt; AeroHive＆lt; / option＆gt; ＆lt; option data-group =“Access Points”value =“Aruba”＆gt; Aruba＆lt; / option＆gt; ＆lt; option data-group =“Audio / Video Devices”value =“Barco”＆gt; Barco＆lt; / option＆gt; ＆lt; option data-group =“Audio / Video Devices”value =“Behringer”＆gt; Behringer＆lt; / option＆gt; ＆lt; option data-group =“Automobile”value =“Tesla”＆gt; Tesla＆lt; / option＆gt; ＆lt; option data-group =“Barcode Scanner”value =“Intermec”＆gt; Intermec＆lt; / option＆gt; ＆lt; option data-group =“Barcode Scanner”value =“Symbol”＆gt; Symbol＆lt; / option＆gt; ＆lt; option data-group =“Biometric Devices”value =“Suprema”＆gt; Suprema＆lt; / option＆gt; !!!截断输出!!! ＆LT; /选择＆GT; ＆LT; /跨度＆GT; ＆LT; / TD＆GT; ＆LT; / TR＆GT; 第三个下拉列表应根据第一个和第二个选择进行过滤。请帮助我提供您的建议以及示例代码。列出的示例具有不同的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>

使用Javascript动态<select>下拉列表

1 个答案: