Bootstrap Select Dropdown on change 打开另一个 Bootstrap Select Dropdown答案

【问题标题】：Bootstrap Select Dropdown on change open another Bootstrap Select DropdownBootstrap Select Dropdown on change 打开另一个 Bootstrap Select Dropdown
【发布时间】：2020-01-13 12:27:45
【问题描述】：

我有 2 个引导程序选择器。 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>

我尝试了下面的代码，但没有工作。

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

【问题讨论】：

试试看stackoverflow.com/questions/12479858/…

标签： jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-select

【解决方案1】：

您可以这样做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>

【讨论】：

谢谢佩德拉姆。 $("#letterdropdownboxes1").on("change", function(e) { setTimeout( function() { $('#letterdropdownboxes2').selectpicker('toggle'); }, 500); });第二个答案对我有用。谢谢。
setTimeout从500加到10就可以了，快开。加载时有什么问题吗？