选择使用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();
});

或者当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,您可以使用Chosen Bootstrap主题

Answer 2

试试这个,我在选择中挖掘并发现只需要传递带有"width"属性的选项,就像在这个或任何其他宽度值:

$("select").chosen({width: "inherit"}) 

Answer 3

如允许选择在Bootstrap模式中使用中所述,问题出在chosen.jquery.js文件中.我在第435行找到了它,并在else语句中添加了以下代码.检查出来,它对我有用.

// Fixing problem when the select is not displayed.
   if ( this.form_field.offsetWidth == 0 ) {
      return "" + $(this.form_field).width() + "px";
    }