选择 bootstrap 3 无法正常工作答案

【问题标题】：chosen with bootstrap 3 not working properly选择 bootstrap 3 无法正常工作
【发布时间】：2013-10-06 00:40:27
【问题描述】：

我有这段代码触发引导模式并通过$.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>

【问题讨论】：

有没有像chosen not found?这样的JS控制台错误
@rt2800 - 不，如您所见，选择的样式已应用，但选项未加载/或已加载但未显示。！！

标签： jquery twitter-bootstrap jquery-chosen

【解决方案1】：

在模态显示后应用 Chosen 应该可以解决您的问题：

$('#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 theme

【讨论】：

我觉得你说的有道理，我会试试，让你知道。即使我认为我是在使用加载方法上的成功逻辑显示模态之后应用选择的。我仍然认为您使用on 方法检查模态的想法比修改核心要好得多。暂时 +1，我会在检查后更改接受的答案；）
这解决了问题，但最初会闪烁原始的裸 html。 This 为我修好了。

【解决方案2】：

试试这个，我在选择中挖掘并发现只需要传递带有“width”属性的选项，例如这个，或者任何其他宽度值：

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

【讨论】：

这非常适合我，谢谢，但是我使用了 $(".chosen").chosen({width: "inherit"});
inherit 对我来说尝试继承为第一个单词键入的每个字母的宽度，动态创建细的垂直下拉列表。 100% 为我修好了。

【解决方案3】：

如Allow Chosen to be used in Bootstrap modal 中所述，问题出在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";
    }

【讨论】：

好的，正是我想要的。谢谢：D
修改源代码并不是真正的解决方案，因为这会在升级时产生问题..

【解决方案4】：

为您选择的类添加宽度将解决此问题。

$('.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({ width:'100%' }); /* add width here !!! */
           }
       });
   });
});

【讨论】：

【解决方案5】：

我今天遇到了同样的问题，但我需要一个快速的解决方案……但先截屏我的问题：

This is my problem

所以我这样做了：

1) 问题是“宽度”，所以我在控制台上看到了这个

take a look on the console, over the "select"

2) 我做了一个快速的解决方案，添加了一个新的“宽度”。正如你在上图中看到的，有一个类 'class="chosen-container selected-container-single'，所以当我调用我的“Modal”时，我使用了“chosen-container”类来添加新的“宽度” “。这是我的代码：

just add one line

所以，基本上我添加了这段代码：

$('.chosen-container').css({ 'width':'350px' });

到调用模态的函数。随意将其复制并粘贴到您的函数中:) 也许这不是一个完美的解决方案，但它对我有用，也许对你也有用。

对不起我的英语，但我正在学习。我说西班牙语比英语好。问候

警察局：There is my result

【讨论】：

$('.chosen-container').css({ 'width':'100%' }); 为我工作

【解决方案6】：

以下解决方案对我有用（来自http://codepen.io/m-e-conroy/pen/ALsdF）：

重新定义“模态”类：

.modal { 
    display: block;
}

【讨论】：