Jquery 选择的引导程序3工作不正常

我有一段代码，它触发引导模式，并通过

$.load（）

加载其内容。我正在加载的页面有一个select元素，我正在调用它。 代码如下：

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

你好
再见

如中所述，问题出在所选的.jquery.js文件中。我在第435行找到了它，并在

else

语句中添加了以下代码。 看看，这对我很有效

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

---

在显示模式后应用所选选项可以解决您的问题：

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen();
});

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen('destroy').chosen();
});

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

或当已应用所选内容时，销毁并重新应用：

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen();
});

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen('destroy').chosen();
});

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

在这里拉小提琴：

因此，在您的情况下，它可能类似于：

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen();
});

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen('destroy').chosen();
});

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

---

编辑

---

要补充所选内容，您可以使用以下对我有效的解决方案（从）：

重新定义“模态”类：

---

试试这个，我在Selected中进行了挖掘，发现只需要传递具有“width”属性的选项，如下面所示，或任何其他宽度值：

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

---

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

$('.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 !!! */
           }
       });
   });
});

---

我今天也有同样的问题，但我需要一个快速的解决方案。。。但首先是我问题的截图：

所以我这样做了：

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

2） 我做了一个快速的解决方案，添加了一个新的“宽度”。正如您在前面的图像中所看到的，有一个类“class=”selected container selected container single”，因此我在调用“Modal”时使用了类“selected container”来添加新的“width”。下面是我的代码：

因此，基本上我添加了以下代码：

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

到调用模态的函数。请随意复制并粘贴到您的函数：）也许这不是一个完美的解决方案，但它对我有效，也可能对您有效

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

---

PD:

是否存在任何JS控制台错误，如

未找到所选内容？

@rt2800-不，如您所见，已应用所选样式，但未加载/或加载选项但未显示。！！好的，正是我想要的。谢谢：D修改源代码不是真正的解决方案，因为这会在升级时产生问题。.我认为您有一点，我会尝试一下，让你知道。即使我认为我是在使用加载成功逻辑方法显示模式后应用Selected。我仍然认为你使用

on

方法检查模式的想法比修改核心要好得多。+1现在，我会在检查后更改接受的答案；）这解决了问题em但最初会闪烁原始的裸html。为我修复了它。这对我来说非常适合，谢谢，但是我使用了$（“.selected”）。selected（{width:“inherit”}）；

inherit

为我尝试继承为第一个单词键入的每个字母的宽度，动态创建薄的垂直下拉列表。

100%

为我修复了它。

$（'.selected container'）.css（{'width'：'100%}）；

对我有用