jquery chosen in bootstrap popover not working

Question

jquery chosen in bootstrap popover not working

1.2k Views Asked by Bjoern At 24 April 2025 at 14:12

I am trying to run jquery chosen inside a bootstrap popover, but the initiated chosen dropdown is not clickable.

Here is my code:

html

<button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title" >Click to toggle popover</button>
<div style="display: none;" id="popovercontent">
<select class="chosen chzn-done">
        <option>Choose...</option>
        <option>jQuery</option>
        <option selected="selected">MooTools</option>
        <option>Prototype</option>
        <option>Dojo Toolkit</option>
    </select>
</div>

JS

$(document).ready(function(){

// init chosen
  var $chosen = $(".chosen").chosen();

// init popover
  var $popover = $('#popover').popover({  
            placement: 'bottom',
            html: true,
            content: function () {
                return $('#popovercontent').html();
            },
            title: function () {
                return $(this).data('title');
            },
  });

// on show popover
  $popover.on("show.bs.popover", function(e) {
    console.log('open popover');
    $chosen.trigger("chosen:updated");
    });

}); // document.ready

https://jsfiddle.net/gdtocsud/

similar question (not answered): Chosen in bootstrap popover not working?

thank you

Bjoern

Original Q&A

There are 3 best solutions below

Sharmila On 20 December 2016 at 09:21

Hi here is the working demo

https://jsfiddle.net/gdtocsud/2/

<div class="panel panel-default">
        <div class="panel-body">
           <div class="btn-group">
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
               <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>
             </button>
             <ul class="dropdown-menu" role="menu">
               <li><a href="#">Item 1</a></li>
               <li><a href="#">Another item</a></li>
               <li><a href="#">This is a longer item that will not fit properly</a></li>
             </ul>
           </div>
         </div>
      </div>

Ganesh Putta On 20 December 2016 at 10:46

try this, may be this will help u

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css">  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css">  
<script>
$(document).ready(function() {
    var $popover = $('#popover').popover({
    placement: 'bottom',
    html: true,
    content: function() {
      return $('#popovercontent').html();
    },
    title: function() {
      return $(this).data('title');
    },
  });
  $popover.on("shown.bs.popover", function(e) {
    $('.chzn-done').chosen();
  });
  $popover.on('hidden.bs.popover', function() {
    $('.chzn-done').chosen('destroy');
  });
});
</script>
</head>
<body style="padding:25px">
<button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title">Click to toggle popover</button>
<div id="popovercontent" style='display:none'>
  <select class="chosen chosen-select chzn-done" >
    <option>Choose...</option>
    <option>jQuery</option>
    <option selected="selected">MooTools</option>
    <option>Prototype</option>
    <option>Dojo Toolkit</option>
  </select>
</div>


</body>
</html>

**Rahul** · Accepted Answer

Here is the js code :

 $(document).ready(function() {

  // init chosen
  //var $chosen = $(".chosen").chosen();

  // init popover
  var $popover = $('#popover').popover({
    placement: 'bottom',
    html: true,
    content: function() {
      return $('#popovercontent').html();
    },
    title: function() {
      return $(this).data('title');
    },
  });

  // on show popover
  $popover.on("shown.bs.popover", function(e) {
    $('.chzn-done').chosen();

  });
  $popover.on('hidden.bs.popover', function() {
    $('.chzn-done').chosen('destroy');
  });
}); // document.ready

For working code: Here is fiddle link

Similar to chosen with modal the chosen behaviour needs to be initialized after the content is ready, so similar to modal events, you can use the popover events

jquery chosen in bootstrap popover not working

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in POPOVER

Related Questions in JQUERY-CHOSEN

Trending Questions

Popular # Hahtags

Popular Questions