Select 基于从另一个下拉列表中选择的下拉项（多选下拉列表）

Question

我有 2 个多 select 下拉菜单：#ListData 和 #ListChart。

这两个都有相同的项目。我喜欢做的是当我 select #ListData 时，我喜欢让 #ListChart 具有相同的项目 selected.

我有以下内容但无法正常工作#ListChart 不会更新为与#ListData 具有相同的项目。

 $('#ListData').change(function(){

   var selectedItems = $('#ListData').val();
   $("#ListChart").val(selectedItems);
   $("#ListChart").multiselect("refresh");

 }

下面是数组的样子：

Answer 1

我猜这是因为你没有触发更改？

使用 .trigger() 如下所示：

$("#ListChart").val(selectedItems).trigger('change');

或者你可以使用 change()

$("#ListChart").val(selectedItems).change()

[![在此处输入图片描述][1]][1]

有关详细信息，请参阅 here

Answer 2

我认为该值已修改但显示组件未正确更新，试试这个：

$("#select1").on("change",function() {
  $("#select2").val($(this).val())   
  $(".filter-option-inner-inner").html( $(this).val().length > 0 ? $(this).val().join(', ') : "Nothing selected")
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" integrity="sha512-ARJR74swou2y0Q2V9k0GbzQ/5vJ2RBSoCWokg4zkfM29Fb3vZEQyv0iWBMW/yvKgyHSR/7D64pFMmU8nYmbRkg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js" integrity="sha512-yDlE7vpGDP7o2eftkCiPZ+yuUyEcaBwoJoIhdXv71KZWugFqEphIS3PU60lEkFaz8RxaVsMpSvQxMBaKVwA5xg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div>
  <select class="selectpicker" id="select1" multiple>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div>
<hr/>
<div>
  <select class="selectpicker" id="select2" multiple>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div>

Select 基于从另一个下拉列表中选择的下拉项（多选下拉列表）

Select Dropdown items based on selection from another dropdown (Multiselect dropdown)

jquery

bootstrap-multiselect