依賴下拉引導選擇

Question

我正在使用 bootstrap-select 並且我想要依賴下拉列表。 首先是類別：

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

第二個是物品列表，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>

Answer 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>

Answer 2

如何使用ajax調用加載第二個選擇數據。 其實我有一個州和城市的下拉選項。 一次加載所有城市是不可能的。 所以我想根據所選的州加載城市。 下拉圖片