Question

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

    });
});

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

Modal View

这是我的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

Answer 2

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

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

Answer 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";
    }

Answer 4

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

nodeHandlers.Add("ul", (node, parent) =>
{
    if (parent is Paragraph)
    {
        _nestedListLevel++;
        return parent.Section;
    }

    _nestedListLevel = 0;
    return parent;
});

nodeHandlers.Add("ol", (node, parent) =>
{
    if (parent is Paragraph)
    {
        _nestedListLevel++;
        return parent.Section;
    }

    _nestedListLevel = 0;
    return parent;
});

Answer 5

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

This is my problem

所以我这样做了：

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

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

2）我快速解决了一个新的“宽度”问题。正如你在上一张图片中看到的那样，有一个类'class =“selected-container selected-container-single'，所以当我调用”Modal“时，我选择了”selected-container“类来添加新的”宽度“。 “。这是我的代码：

just add one line

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

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

调用模态的函数。随意复制并粘贴到您的功能:)也许它不是一个完美的解决方案，但它适用于我，也许也适合你。

抱歉我的英语，但我知道。西班牙语比英语好。问候

PD：There is my result

Answer 6

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

重新定义“模态”类：

.modal { 
    display: block;
}

选择使用bootstrap 3无法正常工作

6 个答案: