动态& lt; select>下拉列表

Dynamic <select> dropdown using Javascript

本文关键字：下拉列表 select 动态 lt      更新时间：2023-09-26

我有一个有三个下拉框的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，提供的示例可能没有帮助。

筛选第三个列表与筛选第二个列表没有任何不同。事实上，如果您以结构化的方式应用属性，则可以在一个事件处理程序中完成所有工作。

下面是一个正在运行的例子:

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

相关文章：