Question

在更新数据时遇到一些问题，我有两个下拉列表并使用引导选择选择器我需要根据第一个下拉列表更新第二个下拉列表但失败了。请帮助发布小提琴链接

$('.selectpicker').on('changed.bs.select', function (e) {
  if($(this).attr('name')=="name2"){
   $(".selectpicker[name='name1']").val();
   }
  else{
  $(".selectpicker[name='name2']").val();
   }
 });

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

<select id="id1" name="name1" class="selectpicker" data-style="form- 
        control" data-live-search="true" title="Select Fruits" 
       multiple="multiple">
  <option value="Fruit">Fruits</option>
  <option value="Animal">Animal</option>
</select>
    
<select id="id2" name="name2" class="selectpicker" data-style="form-control" data-live-search="true" title="Select Product" 
       multiple="multiple">
  <option value="Fruit">Mangoes</option>
  <option value="Fruit">Apple</option>
  <option value="Animal">Dog</option>
  <option value="Animal">Cat </option>
</select>

Answer 1

您可以在选择框上使用 change 事件。在此使用 $(this).val() 获取所选选项的值这将返回您 array 因此使用 for 循环遍历值并显示值在第二个下拉列表中匹配的选项。最后刷新您的选择器以更新更改。

演示代码：

$('#id1').on('change', function(e) {
  var values = $(this).val()
  $("#id2 option").hide() //hide all options
  $('#id2').selectpicker('deselectAll') //if want to remove all selcted optn
  if (values.length > 0) {
    for (var i = 0; i < values.length; i++) {
      //show where value is same..
      $("#id2 option[value=" + values[i] + "]").show()
    }
  } else {
    $("#id2 option").show() //show all options 
  }
  $('#id2').selectpicker('refresh'); //refresh selctpicker
});

<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://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<select id="id1" name="name1" class="selectpicker" data-style="form-control" data-live-search="true" title="Select Fruits" multiple="multiple">
  <option value="Fruit">Fruits</option>
  <option value="Animal">Animal</option>
</select>
<select id="id2" name="name2" class="selectpicker" data-style="form-control" data-live-search="true" title="Select Product" multiple="multiple">
  <option value="Fruit">Mangoes</option>
  <option value="Fruit">Apple</option>
  <option value="Animal">Dog</option>
  <option value="Animal">Cat </option>

</select>

如何根据先前的下拉选择值填充下拉列表

1 个答案: