依赖下拉引导选择答案

【问题标题】：Depend dropdown bootstrap-select依赖下拉引导选择
【发布时间】：2021-02-14 11:39:15
【问题描述】：

我正在使用 bootstrap-select 并且我想要依赖下拉菜单。第一个是类别：

<select class="selectpicker" id="category">
     <option value="1"> Fruit </option>
     <option value="2"> Animal</option>
</select>

第二个是item列表，class表示类别

<select class="selectpicker" id="items">
     <option class="1" value="1"> Banana </option>
     <option class="1" value="2"> Apple </option>
     <option class="2" value="3"> Cat </option>
     <option class="2" value="4"> Dog</option>
</select>

我的目标是当用户选择一个或多个类别的过滤器时，它也会过滤项目下拉列表

此代码适用于一个选择，但不适用于 2。我该怎么做？

<script>
  $("#category").change(function () {
    var category= $(this).val());
    $('option').each(function() {
    if ($(this).hasClass(category)) {
      $(this).show();
    } else {
      $(this).hide();
    }
    });
    $('.selectpicker').selectpicker('refresh');

  });
</script>

【问题讨论】：

标签： jquery bootstrap-select

【解决方案1】：

您需要遍历 items 选择选项，但在您当前的代码中，您正在检查两个选择框的选项，因此没有必需类的值也会从 category 选择框隐藏。而是将 $('option') 更改为 $('#items option')，然后更改一次值，您可以使用.val("default").trigger('change') 将某些默认选项设置为选中items 选择框。

演示代码：

$("#category").change(function() {
  var category = $(this).val();
  //loop through second selects options
  $('#items option').each(function() {
  //if option has default class
    if ($(this).hasClass(category) || $(this).hasClass("default")) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });

  $('.selectpicker').selectpicker("refresh");
  $('#items').val("0").trigger('change');//set default value as selected


});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>

<select class="selectpicker" id="category">

  <option value="1"> Fruit </option>

  <option value="2"> Animal</option>

</select>

<select class="selectpicker" id="items">
  <!--added this just to keep default value selcted-->
  <option class="default" value="0"> --Select-- </option>
  <option class="1" value="1"> Banana </option>

  <option class="1" value="2"> Apple </option>

  <option class="2" value="3"> Cat </option>

  <option class="2" value="4"> Dog</option>

</select>

【讨论】：