与引导程序3一起选择时无法正常工作 [英] chosen with bootstrap 3 not working properly

问题描述

我有这段代码可以触发引导程序模式并通过$.load()加载其内容.我正在加载的页面上有一个select元素，我称它为selected元素. 这是代码:

I have this code which triggers a bootstrap modal and load its content via $.load(). the page I'm loading has a select element which I'm calling chosen on. Here's the code:

$('.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();

    });
});

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

the results I'm getting is like the following image:

这是我的HTML内容:

and this is my Html content:

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

推荐答案

显示模态后应用选择应该可以解决您的问题:

$('#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();
           }
       });
   });
});

---

编辑

要补充已选择的内容，可以使用已选择的Bootstrap主题

To complement Chosen you can use the Chosen Bootstrap theme

这篇关于与引导程序3一起选择时无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！