jquery выбрано в bootstrap popover не работает

Я пытаюсь запустить jquery, выбранный внутри загрузочного popover, но инициированное выбранное выпадающее меню не доступно для кликов.jquery выбрано в bootstrap popover не работает

Вот мой код:

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>

$(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/

подобный вопрос (не ответил): Chosen in bootstrap popover not working?

спасибо

Бьорн

источник

2016-12-20 Bjoern

Вот код 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("shown.bs.popover", function(e) { 
    $('.chzn-done').chosen(); 

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

Для рабочего кода: Здесь fiddle link

Аналогично выбирается с модальным выбранным поведением необходимо инициализировать после того, как содержимое будет готово, так похоже на модальное событие, вы можете использовать поповер событие

источник

2016-12-20 10:08:13 rahulsm

Это решит вашу проблему с поиском выпадающих элементов. – rahulsm

большое спасибо, это решает мою проблему. – Bjoern

Привет вот рабочая демо

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>

источник

2016-12-20 09:21:03 Sharmila

мне нужен выбранный плагин для работы, включая поиск раскрывающихся элементов. У меня есть выпадающие списки с 50 + элементами и нужно искать элемент. ваше решение не поддерживает это. – Bjoern

попробовать это, может быть, это поможет 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>

источник

2016-12-20 10:46:59

спасибо, тоже, ganesh. – Bjoern

jquery выбрано в bootstrap popover не работает

ответ

Смежные вопросы