jQuery 选择引导程序 3 无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19089337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
chosen with bootstrap 3 not working properly
提问by mamdouh alramadan
I have this code which triggers a bootstrap modal and load its content via $.load(). the page I'm loading has a select element which I'm calling chosen on.
Here's the code:
我有这个代码，它触发一个引导模式并通过$.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();
});
});
the results I'm getting is like the following image:
我得到的结果如下图所示：
and this is my Html content:
这是我的 Html 内容：
<select name="elementName" data-placeholder="Please work.." class="chosen-select">
<option value="test">Hi</option>
<option value="test2">bye</option>
</select>
回答by Koen.
Applying Chosen after the modal is shown should solve your problem:
在显示模态后应用 Chosen 应该可以解决您的问题：
$('#myModal').on('shown.bs.modal', function () {
$('.chosen-select', this).chosen();
});
Or when Chosen was already applied, destroy and reapply:
或者当 Chosen 已经应用时，销毁并重新应用：
$('#myModal').on('shown.bs.modal', function () {
$('.chosen-select', this).chosen('destroy').chosen();
});
Fiddle here: http://jsfiddle.net/koenpunt/W6dZV/
在这里小提琴：http: //jsfiddle.net/koenpunt/W6dZV/
So in your case it would probably something like:
因此，在您的情况下，它可能类似于：
$('.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();
}
});
});
});
EDIT
编辑
To complement Chosen you can use the Chosen Bootstrap theme
为了补充 Chosen，您可以使用Chosen Bootstrap 主题
回答by lexeek
Try this, I digged in chosen and found out that just need to pass options with "width" property like in this, or any other width value:
试试这个，我挖了选择，发现只需要像这样传递带有“宽度”属性的选项，或任何其他宽度值：
$("select").chosen({width: "inherit"})
回答by cg.mike
As described in Allow Chosen to be used in Bootstrap modal, the problem is within the chosen.jquery.jsfile. I found it on line 435and just added the following code inside the elsestatement.
check it out, it worked for me.
如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";
}
回答by Gunasegar
Adding width to your chosen class will solve this problem.
为您选择的类添加宽度将解决这个问题。
$('.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 !!! */
}
});
});
});
回答by MRH
I had the same problem today but I needed a quickly solution... but firs a screenshot of my problem:
我今天遇到了同样的问题，但我需要一个快速的解决方案......但首先是我的问题的屏幕截图：
so I did this:
所以我这样做了：
1) The problem is the "width", so I saw on console this
1）问题是“宽度”，所以我在控制台上看到了这个
take a look on the console, over the "select"
2) I made a quickly solution adding a new "width". As you can see in the previous image, there is a class 'class="chosen-container chosen-container-single', so I took the class "chosen-container" to add the new "width" when I call my "Modal". Here my code:
2）我做了一个快速解决方案，添加了一个新的“宽度”。正如您在上图中所看到的，有一个类“class="chosen-container selected-container-single”，所以当我调用我的“Modal “。这是我的代码：
so, basically I added this code:
所以，基本上我添加了这个代码：
$('.chosen-container').css({ 'width':'350px' });
to the function that call the modal. Feel free to copy and paste this on your function :) Maybe it is not a perfect solution but it works for me and maybe for you too.
到调用模态的函数。随意复制并粘贴到您的函数中 :) 也许这不是一个完美的解决方案，但它对我有用，也许对你也有用。
sorry for my english, but I'm learnig. I speak spanish better than english. Greetings
对不起我的英语，但我正在学习。我说西班牙语比英语好。你好
PD：这是我的结果
回答by KirEvse
The following solution worked for me (from http://codepen.io/m-e-conroy/pen/ALsdF):
以下解决方案对我有用（来自http://codepen.io/me-conroy/pen/ALsdF）：
Redefine "modal" class:
重新定义“模态”类：
.modal {
display: block;
}
