Bootstrap Выберите раскрывающийся список при изменении откройте другой Bootstrap Выберите раскрывающийся список - PullRequest
Новая
       8

Bootstrap Выберите раскрывающийся список при изменении откройте другой Bootstrap Выберите раскрывающийся список

0 голосов
/ 13 января 2020

У меня есть 2 bootstrap выбор сборщика. Как автоматически открывать смежный раскрывающийся список при выборе одного раскрывающегося списка. 

<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>

Я пробовал приведенный ниже код, но не работал. 

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

1 Ответ

1 голос
/ 13 января 2020

Вы можете сделать это trick, добавить show класс к родителю и братьям и сестрам, а затем сделать 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>

Примечание !

Правильный способ сделать это selectpicker('toggle') но так как вы делаете событие click, в то же время оно игнорирует toggle или show, вы как бы закрываете его перед тем, как его открыть. чтобы доказать это, вы можете проверить и использовать этот пример: 

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