Search code examples
jquerybootstrap-multiselect

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

I have 2 multi select drop downs: #ListData and #ListChart.

Both of these have identical items in them. What I like do do is when I select #ListData, I like to have #ListChart have the identical items selected.

I have the following but not working in that #ListChart does not update to have the same items as #ListData.

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

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

 }

Below is what the array looks like:

enter image description here

Solution

  • I figure that the value is modify but the displaying component is not correctly update, try this :

    $("#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>