引导程序选择下拉列表时更改打开另一个引导程序选择下拉列表

Question

我有 2 个引导选择选择器。当我选择一个下拉列表时，我如何自动打开相邻的下拉列表。

<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');
}
});

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