jquery - 选择 Bootstrap 3 无法正常工作

Question

我有这段代码，它触发 Bootstrap 模式并通过$.load()加载其内容。我正在加载的页面有一个选择元素，我称之为选择元素。 代码如下:

$('.someClick').click(function(e){
   e.preventDefault();
   x.modal('show');
   x.find('.modal-body').load('path/page.html',
function(response, status, xhr){

       if(status =="success")
        $("select[name=elementName]").chosen();

    });
});

我得到的结果如下图所示:

这是我的 Html 内容:

 <select name="elementName" data-placeholder="Please work.." class="chosen-select">
        <option value="test">Hi</option>
        <option value="test2">bye</option>
 </select>

Answer 1

在显示模式后应用“选择”应该可以解决您的问题:

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen();
});

或者当选择已经应用时，销毁并重新应用:

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen('destroy').chosen();
});

在这里摆弄:http://jsfiddle.net/koenpunt/W6dZV/

所以在你的情况下它可能会是这样的:

$('.someClick').click(function(e){
   e.preventDefault();
   x.modal('show');
   x.on('shown.bs.modal', function(){
       x.find('.modal-body').load('path/page.html', function(response, status, xhr){
           if(status == "success"){
               $("select[name=elementName]").chosen();
           }
       });
   });
});

<小时/>

编辑

要补充“选择”，您可以使用 Chosen Bootstrap theme