Twitter Bootstrap Question posted in

Twitter bootstrap – bootstrap-select hide event not firing

I’m trying to figure out why I can’t get the close event triggered when a bootstrap-select is closed.

$(function() {
    
$('.selectpicker').on('hide.bs.dropdown', function () {
    alert('hide.bs.dropdown');
})
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/js/bootstrap-select.js"></script>

<select class="selectpicker" multiple="true"  data-done-button="true"  data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
Tags:

2

Answers


  1. 0

    The hide.bs.dropdownevent is tied to the parent of the selectpicker, instead of the selectpicker itself, so you will need to :

    $(function() {
    
$('#selectpicker-container').on('hide.bs.dropdown', function () {
    alert('hide.bs.dropdown');
})
  
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/js/bootstrap-select.js"></script>

<div id="selectpicker-container">
     <select class="selectpicker" multiple="true"  data-done-button="true"  data-live-search="true">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
    </select>
</div>
    Login or Signup to reply.
  2. 0

    the bootstrap-select plugin has different events to the standard bootstrap dropdown. see Here.

    rendered.bs.select, refreshed.bs.select, change.bs.select,
    hide.bs.select, hidden.bs.select, show.bs.select, shown.bs.select

    hide.bs.select, hidden.bs.select, show.bs.select, and shown.bs.select
    all have a relatedTarget property, whose value is the toggling anchor
    element.

    changed.bs.select passes through event, clickedIndex, newValue,
    oldValue. true if selected and false if not selected.

    So, try:-

    $(function() {    
    $('.selectpicker').on('hide.bs.select', function () {
        alert('hide.bs.select');
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search