bootstrap-select selectpicker无法在下拉菜单中选择

Question

我找不到在下拉菜单中使用插件 bootstrap-select 的方法。

选择只是不显示。

我添加了这个 jQuery，不要通过单击来关闭下拉菜单：

$(document).on("click", ".menuplus", function (e) {
  e.stopPropagation();
});

而且我不认为它不会因为这个

stopPropagation

条件而出现。

我用最低要求做了一个jsfiddle，我觉得这是引导选择插件错误！

有机会让它发挥作用吗？

https://jsfiddle.net/d3yqo9wc/4/

全部使用旧版本的 Bootstrap 4 /jQuery 3.3.1，因为我们正在进行的项目就是使用它！

Answer 1

解决此问题的一种方法是手动控制下拉菜单的行为。因此，每当单击菜单时，都会从下拉菜单以及下拉菜单中添加/删除类 show。

此外，现在添加了更多代码，用于在单击

dropdown-div

外部时手动关闭菜单本身。您可以添加类似的代码以使 choose 按钮起作用。

演示代码：

$('button.dropdown-toggle').on('click', function(event) {
  $(this).parent().toggleClass('show') //addor remove class
  $(this).attr('aria-expanded', $(this).attr('aria-expanded') == 'false' ? 'true' : 'false'); //add true or false
  $("div[aria-labelledby=" + $(this).attr('id') + "]").toggleClass('show') //add class/remove
});

$('body').on('click', function(e) {
  //check if the click occur outside `dropdown-div` tag if yes ..hide menu
  if (!$('#dropdown-div').is(e.target) &&
    $('#dropdown-div').has(e.target).length === 0 &&
    $('.show').has(e.target).length === 0
  ) {
    //remove clases and add attr 
    $('#dropdown-div').removeClass('show')
    $('#dropdown-div > button').attr('aria-expanded', 'false');
    $("#dropdown-div").children('div.dropdown-menu').removeClass('show')
  }
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>


<h1>Hello, world!</h1>

<select id="SelectGlobalSearch" class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
<!--added id -->
<div id="dropdown-div" class="dropdown mt-5">
  <!-- removed data-toggle="dropdown"-->
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu menuplus text-center" aria-labelledby="dropdownMenu2">

    <div class="p-5">
      <select id="SelectGlobalSearch2" class="selectpicker">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>

    <button class="btn btn-primary">
       Choose
     </button>

  </div>
</div>