2

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>
Zam Abdul Vahid
  • 2,389
  • 3
  • 18
  • 25
Web Funda
  • 41
  • 1
  • 6
  • 1
    Please post your code here in the question rather than as an external file reference which may become obsolete. – Professor Abronsius May 20 '21 at 13:48
  • I think what you are looking for is Cascading DropDown. Have a look at this link, it might solve your problem. [How to create cascading drop-down list](https://stackoverflow.com/questions/46954959/how-to-create-cascading-drop-down-list) – TBA May 20 '21 at 13:51
  • A similar question has been answered here: https://stackoverflow.com/a/10571044/1863967 – Venky Viswanath May 20 '21 at 14:09
  • not working i have tried that – Web Funda May 20 '21 at 14:47

1 Answers1

4

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>
Swati
  • 28,069
  • 4
  • 21
  • 41