34

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

6 回答 6

48

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

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

于 2013-10-01T21:50:36.447 回答
20

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

$("select").chosen({width: "inherit"})
于 2014-09-19T23:19:01.923 回答
10

如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";
    }
于 2013-09-30T09:10:04.660 回答
3

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

这是我的问题

所以我这样做了：

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

在控制台上看一下“选择”

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

只需添加一行

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

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

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

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

PD：这是我的结果

于 2017-10-23T22:28:01.027 回答
3

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

$('.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 !!! */
           }
       });
   });
});
于 2015-11-14T10:49:57.563 回答
1

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

重新定义“模态”类：

.modal { 
    display: block;
}
于 2014-08-14T15:09:11.730 回答