Jquery bootstrap Select Select 器不能在下拉菜单中 Select

发布于11月05日

我找不到一种方法来使用插件 bootstrap -在下拉菜单中 Select .

SELECT就是不显示.

我添加了这个jQuery，不会通过点击关闭下拉菜单:

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

我不认为它不会因为这stopPropagation个条件而不出现.

我做了一个jsfiddle的最低要求，我感觉它是 bootstrap Select 插件错误！

有没有可能让它奏效？

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

这都是旧版本的Bootstrap 4/jQuery 3.3.1，因为我们所从事的项目正在使用它！

SOLUTION

感谢@Swati的回复，我可以更新jsfiddle:

https://jsfiddle.net/jdtnsmwu/46/个

这怎么能更好呢？:)

推荐答案

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

此外，现在添加了一些更多的代码，手动关闭菜单本身时，点击dropdown-div外.你可以为choose按钮添加类似的代码来工作.

100

$('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/bootstrap@4.1.3/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/popper.js@1.14.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/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>