I have created a simple dropdown-menu with bootstrap and put a selectpicker menu inside of it.

When I click on the select menu everything works fine. However if I don't select anything from the select menu and click outside the bootstrap dropdown, the menu stays.

Any ideas how i can get the select menu to also close when the dropdown closes?

See code example: /

    <div class="dropdown">
  <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">test</button>
  <div class="dropdown-menu">
    <div style="height:150px; width:250px">
      <select name="test" class="selectpicker" data-size="3">
        <option value="1">Test 1</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
      </select>
    </div>
    <div>
      <button class="btn btn-xs btn-primary" type="submit">Change</button>
    </div>
  </div>
</div>

<script>
  $('.dropdown-menu').on('click', function(event) {
    event.stopPropagation();
  });

  $('.selectpicker').selectpicker({
    container: 'body',
    dropupAuto: false
  });

  $('body').on('click', function(event) {
    var target = $(event.target);
    if (target.parents('.bootstrap-select').length) {
      event.stopPropagation();
      $('.bootstrap-select.open').removeClass('open');
    }
  });

</script>

I have created a simple dropdown-menu with bootstrap and put a selectpicker menu inside of it.

When I click on the select menu everything works fine. However if I don't select anything from the select menu and click outside the bootstrap dropdown, the menu stays.

Any ideas how i can get the select menu to also close when the dropdown closes?

See code example: https://jsfiddle/yw0cw028/

    <div class="dropdown">
  <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">test</button>
  <div class="dropdown-menu">
    <div style="height:150px; width:250px">
      <select name="test" class="selectpicker" data-size="3">
        <option value="1">Test 1</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
      </select>
    </div>
    <div>
      <button class="btn btn-xs btn-primary" type="submit">Change</button>
    </div>
  </div>
</div>

<script>
  $('.dropdown-menu').on('click', function(event) {
    event.stopPropagation();
  });

  $('.selectpicker').selectpicker({
    container: 'body',
    dropupAuto: false
  });

  $('body').on('click', function(event) {
    var target = $(event.target);
    if (target.parents('.bootstrap-select').length) {
      event.stopPropagation();
      $('.bootstrap-select.open').removeClass('open');
    }
  });

</script>

• javascript
• jquery
• twitter-bootstrap

4 Answers 4

The point of interest:

in order to close the rendered select, after clicking on it and then clicking outside the dialog, you need to listen for the dialog hide event:

 $('.dropdown').on('hide.bs.dropdown', function() {

Your approach ($('body').on('click', function(event) {...) is wrong.

To close the rendered select you can remove the class open:

$('.bootstrap-select.open').removeClass('open');

It's necessary to change the function:

$('.dropdown-menu').on('click', function(event) {
    event.stopPropagation();
});

because this function must be used to take track if you clicked the selectpicker or not.

So the snippet is (your updated jsfiddle is: HERE):

// take track if you clicked in the dialog inside the selectpicker area
var selectpickerIsClicked = false;

$(function () {
  $('.selectpicker').selectpicker({
    container: 'body',
    dropupAuto: false
  });

  $('.dropdown-menu').on('click', function (e) {
    if ($(e.target).closest('.bootstrap-select.open').is(':visible') || $(e.target).closest('.btn.dropdown-toggle.btn-default').is(':visible')) {
      selectpickerIsClicked = true;
    }
  });

  // when the dialog is closed....
  $('.dropdown').on('hide.bs.dropdown', function (e) {
    if (selectpickerIsClicked) {
      e.preventDefault();
      selectpickerIsClicked = false;
    }
  });
});

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet">
<link href="https://code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery./jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery./ui/1.11.4/jquery-ui.js"></script>

<div class="dropdown">
    <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">test</button>
    <div class="dropdown-menu">
        <div style="height:150px; width:250px">
            <select name="test" class="selectpicker" data-size="3">
                <option value="1">Test 1</option>
                <option value="2">Test 2</option>
                <option value="3">Test 3</option>
            </select>
        </div>
        <div>
            <button class="btn btn-xs btn-primary" type="submit">Change</button>
        </div>
    </div>
</div>

Try adding this to the bottom of your script section

  $('ul > li').on('click', function() {
    $('.dropdown').dropdown('toggle');
  })

You can achieve this by stop propagating the events from the child of "dropdown-menu" and closing the open menu by clicking on it anywhere else. Hope this will help.

$('.dropdown-menu').on('click', function(event) {
     event.stopPropagation();
     $('.bootstrap-select.open').removeClass('open');
     }).find('.btn-group').on('click', function(event) {
        event.stopPropagation();
  });

 $('.selectpicker').selectpicker({
    container: 'body',
    dropupAuto: false
 });

 $('body').on('click', function(event) {
    var target = $(event.target);
    if (target.parents('.bootstrap-select').length) {
        event.stopPropagation();
        $('.bootstrap-select.open').removeClass('open');
    } 
}); 

fiddle: https://jsfiddle/yw0cw028/8/

i have the same issue, i tried above solutions but it didn't work for me so i removed show class on clicking outside the dropdown.

$(function () {
    $(document).on("click", function(e) {
        if ($(e.target).is(".bootstrap-select") === false) {
          $(".bootstrap-select>.dropdown-menu.show").removeClass("show");
        }
      });
  
});