如何根据第一个下拉列表过滤第二个下拉列表

Question

我想根据第一个下拉列表过滤第二个下拉列表。

例如：如果我从第一个下拉列表中 select 'finance'，第二个下拉列表将显示所有 'finance' 值（会计，属性保管人），如果我从第一个下拉列表中 select 'academic and research'，则第二个下拉列表将显示所有 'academic and research' 值（职员，HiEd 图书管理员）。

这是我当前的代码，它不起作用：

第一个下拉列表：

 <select id="search_dept" type="text" name="dept" required>
     <option value="">Select Department</option>
     <option id="111" value="Finance">Finance</option>
     <option id="211" value="Academic and Research">Academic and Research</option>
 </select>

第二个下拉列表：

<select id="emp_table" type="text" name="position" required>
     <option value="">Select Position</option>
     <option id="111" value="Property Custodian">Property Custodian</option>
     <option id="111" value="Accountant">Accountant</option>
     <option id="211" value="Clerk">Clerk</option>
     <option id="211" value="HiEd Libririan">HiEd Libririan</option>
</select>

脚本：

<script>
    document.getElementById("search_dept").addEventListener("change", function() {
       // let toShow=':contains("'+this.value+'")';
       // console.log(toShow);
       $('#emp_table select option').hide();
       $('#emp_table select option:contains("'+this.value+'")').show();
    })
</script>

Answer 1

注意：您的第一个下拉值应该在第二个下拉值的开头

$(function() {
  $('#independent').on('change', function(e) {

    var selected = $('#independent').val().toUpperCase();
    var currentDep = $('#dependent').val().charAt(0).toUpperCase();
    var changedSelected = false;

    $('#dependent option').each(function() {

      var opt = $(this);
      var value = opt.val().charAt(0).toUpperCase();

      if (value !== selected) {

        opt.addClass('hide');
        opt.removeAttr('selected');

      } else {

        opt.removeClass('hide');

        if (!changedSelected) {

          opt.attr('selected', 'selected');
          changedSelected = true;

        } else {
          opt.removeAttr('selected');
        }
      }
    });
  });
});

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="independent">
  <option value="A"> A </option>
  <option value="B"> B </option>
</select>

<select id="dependent">
  <option value="A1"> A1 </option>
  <option value="A2"> A2 </option>
  <option value="A3"> A3 </option>
  <option value="B1"> B1 </option>
  <option value="B2"> B2 </option>
  <option value="B3"> B3 </option>
</select>

Answer 2

首先你不应该在 DOM 中有具有相同 id 的元素。
其次，您应该在第二个过滤器（例如类别）中具有过滤器属性。
在下面的代码中，您可以看到您的问题的工作示例，如果您有问题，请添加评论。

document.getElementById("search_dept").addEventListener("change", function() {
       const categoryId = $(this).find(':selected').attr('category');
       $('#emp_table option').hide();      
       $('#emp_table').val("");
       $('#emp_table option[category=' + categoryId + ']').show();
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="search_dept" type="text" name="dept" required>
     <option value="">Select Department</option>
     <option id="1" category="1" value="Finance">Finance</option>
     <option id="2" category="2" value="Academic and Research">Academic and Research</option>
 </select>
 
<select id="emp_table" type="text" name="position" required>
     <option value="">Select Position</option>
     <option id="3" category="1" value="Property Custodian">Property Custodian</option>
     <option id="4" category="1" value="Accountant">Accountant</option>
     <option id="5" category="2" value="Clerk">Clerk</option>
     <option id="6" category="2" value="HiEd Libririan">HiEd Libririan</option>
</select>

Answer 3

不要为元素提供非唯一 ID。请改用数据属性。对于下面的示例，我提供了一个名为 "deptId" 的数据属性，并将其添加到选项中。

您可以创建一个 jQuery 插件，将下拉列表绑定到另一个。

(function() {
  $.fn.bindDropdown = function(bounded, dataAttr) {
    var $self = this, $bounded = $(bounded);
    $self.on('change', function() {
      if ($self.val() == null || $self.val() === '') {
        $bounded.find('option').show();
      } else {
        const id = $self.find('option:selected').data(dataAttr);
        $bounded.find('option').each(function() {
          $(this)[$(this).data('deptId') === id ? 'show' : 'hide']();
        });
        if (!$bounded.find('option:selected').is(':visible')) {
          $bounded.val(null);
        }
      }
    });
  };
})(jQuery);

$('#search_dept').bindDropdown('#emp_table', 'deptId');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="search_dept" type="text" name="dept" required>
  <option value="">Select Department</option>
  <option data-dept-id="111" value="Finance">Finance</option>
  <option data-dept-id="211" value="Academic and Research">Academic and Research</option>
</select>
<select id="emp_table" type="text" name="position" required>
  <option value="">Select Position</option>
  <option data-dept-id="111" value="Property Custodian">Property Custodian</option>
  <option data-dept-id="111" value="Accountant">Accountant</option>
  <option data-dept-id="211" value="Clerk">Clerk</option>
  <option data-dept-id="211" value="HiEd Libririan">HiEd Libririan</option>
</select>

您可以更进一步，通过添加选项使该插件更强大。您可以为源和目标提供函数或属性。

在这个例子中，我解耦了数据属性检查；并将其替换为函数回调（作为选项）。

function main() {
  $('#search-dept-1').bindDependency('#emp-table-1', {
    sourceFn: function() { return $(this).data('deptId'); },
    targetFn: function() { return $(this).data('deptId'); }
  });

  $('#search-dept-2').bindDependency('#emp-table-2', {
    sourceAttr: 'deptId',
    targetAttr: 'deptId'
  });
}

/* jquery.bind-select.js */
(function() {
  $.bindSelectDefaults = {
    sourceAttr: null,
    sourceFn: null,
    targetAttr: null,
    targetFn: null
  };
  var _getValue = function($ref, attr, fn) {
      return attr ? $ref.data(attr) : fn.call($ref, $ref);
    };
  $.fn.isVisible = function() {
    return this.is(':visible') || this.css('display') !== 'none';
  };
  $.fn.selectedOption = function() {
    return $(this.find('option:selected'));
  };
  $.fn.bindDependency = function(bounded, options) {
    var
      opts = $.extend(true, {}, $.bindSelectDefaults, options),
      $self = this, $bounded = $(bounded);
    $self.on('change', function() {
      if ($self.val() == null || $self.val() === '') {
        $bounded.find('option').show();
      } else {
        var
          $currOpt = $bounded.selectedOption(),
          sourceId = _getValue($self.selectedOption(), opts.sourceAttr, opts.sourceFn);
        $bounded.find('option')
          .hide()
          .each(function() {
            var $target = $(this),
              targetId = _getValue($target, opts.targetAttr, opts.targetFn);
            if (targetId === sourceId) {
              $(this).show();
            }
          });
        $bounded.val($currOpt.isVisible() ? $currOpt.val() : null);
      }
    });
  };
})(jQuery);

main();

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 2em;
  grid-column-gap: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
  <select id="search-dept-1" type="text" name="dept" required>
    <option value="">Select Department</option>
    <option data-dept-id="111" value="Finance">Finance</option>
    <option data-dept-id="211" value="Academic and Research">Academic and Research</option>
  </select>
  <select id="emp-table-1" type="text" name="position" required>
    <option value="">Select Position</option>
    <option data-dept-id="111" value="Property Custodian">Property Custodian</option>
    <option data-dept-id="111" value="Accountant">Accountant</option>
    <option data-dept-id="211" value="Clerk">Clerk</option>
    <option data-dept-id="211" value="HiEd Libririan">HiEd Libririan</option>
  </select>
  <select id="search-dept-2" type="text" name="dept" required>
    <option value="">Select Department</option>
    <option data-dept-id="111" value="Finance">Finance</option>
    <option data-dept-id="211" value="Academic and Research">Academic and Research</option>
  </select>
  <select id="emp-table-2" type="text" name="position" required>
    <option value="">Select Position</option>
    <option data-dept-id="111" value="Property Custodian">Property Custodian</option>
    <option data-dept-id="111" value="Accountant">Accountant</option>
    <option data-dept-id="211" value="Clerk">Clerk</option>
    <option data-dept-id="211" value="HiEd Libririan">HiEd Libririan</option>
  </select>
</div>

如何根据第一个下拉列表过滤第二个下拉列表

how to filter 2nd drop-down list according to 1st drop-down list

html

javascript

jquery

drop-down-menu