how to populate dropdown list based on previous dropdown selected value

having some issues while updating data, I have two dropdown list and using bootstrap select picker I need to update second dropdown list based on first one but failed.pls kindly help Posting the fiddle link

fiddlelink

$('.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

You can use change event on your select-box . Inside this get value of selected option using $(this).val() this will return you array so use for-loop to iterate through value and show options where value matches in second dropdown . Lastly refresh your selectpicker to update changes .

Demo Code :

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