Bootstrap Select Dropdown on change open another Bootstrap Select Dropdown

Question

I have 2 bootstrap select picker. How i automatically open adjacent drop down when one drop down is selected.

<select class="selectpicker" data-live-search="true" data-size="10" id="letterdropdownboxes1" name="letterdropdownboxes1">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
</select>

<select class="selectpicker" data-live-search="true" data-size="10" id="letterdropdownboxes2" name="letterdropdownboxes2">
<option value=""></option>
<option value="A1">A1</option>
<option value="B1">B1</option>
</select>

I tried below code but not working.

$("#letterdropdownboxes1").on("change", function(e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    if (valueSelected != null) {
        $('#letterdropdownboxes2').selectpicker('toggle');
    }
});

Try looking at https://stackoverflow.com/questions/12479858/twitter-bootstrap-call-a-js-function-when-a-dropdown-is-closed — AndreasHassing, Jan 13 '20 at 12:43

Pedram · Answer 1 · 2020-01-13T12:50:31.857

You can do this trick, add show class to parent and siblings, then do a refresh

$("#letterdropdownboxes1").on("change", function(e) {
  $('#letterdropdownboxes2').parent('.bootstrap-select').addClass('show')
  $('#letterdropdownboxes2').siblings('.dropdown-menu ').addClass('show')
  $('#letterdropdownboxes2').selectpicker('refresh');
});

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.12/css/bootstrap-select.min.css" integrity="sha256-l3FykDBm9+58ZcJJtzcFvWjBZNJO40HmvebhpHXEhC0=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.12/js/bootstrap-select.min.js" integrity="sha256-+o/X+QCcfTkES5MroTdNL5zrLNGb3i4dYdWPWuq6whY=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<select class="selectpicker" data-live-search="true" data-size="10" id="letterdropdownboxes1" name="letterdropdownboxes1">
  <option value=""></option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>

<select class="selectpicker" data-live-search="true" data-size="10" id="letterdropdownboxes2" name="letterdropdownboxes2">
  <option value=""></option>
  <option value="A1">A1</option>
  <option value="B1">B1</option>
</select>

A note !

The right way to do this is selectpicker('toggle') but since you do a click event, on the same time it ignore toggle or show, kinda you close it before open it. to prove this, you can check and use this example:

$("#letterdropdownboxes1").on("change", function(e) {
  setTimeout(
    function() {
      $('#letterdropdownboxes2').selectpicker('toggle');
    }, 500);
});

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.12/css/bootstrap-select.min.css" integrity="sha256-l3FykDBm9+58ZcJJtzcFvWjBZNJO40HmvebhpHXEhC0=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.12/js/bootstrap-select.min.js" integrity="sha256-+o/X+QCcfTkES5MroTdNL5zrLNGb3i4dYdWPWuq6whY=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<select class="selectpicker" data-live-search="true" data-size="10" id="letterdropdownboxes1" name="letterdropdownboxes1">
  <option value=""></option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>

<select class="selectpicker" data-live-search="true" data-size="10" id="letterdropdownboxes2" name="letterdropdownboxes2">
  <option value=""></option>
  <option value="A1">A1</option>
  <option value="B1">B1</option>
</select>

Thank you Pedram. $("#letterdropdownboxes1").on("change", function(e) { setTimeout( function() { $('#letterdropdownboxes2').selectpicker('toggle'); }, 500); }); Second answer is working for me. Thank you. — Shibu Thomas, Jan 13 '20 at 12:53
Is it ok to add setTimeout from 500 to 10. It is fast opening. Any problem occur while loading? — Shibu Thomas, Jan 13 '20 at 12:57

Bootstrap Select Dropdown on change open another Bootstrap Select Dropdown

1 Answers1