jQuery 选择不适用于默认情况下不显示的选择下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19244942/
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 not working for select drop down which is not displayed by default
提问by Umar Adil
I have a select box in a div which is displayed none by default and on some click event the display property of div is changed to block but the select drop down is not displaying and is showing empty space. I have called the chosen() method for the select box in the same triggered function where I am changing the visibility of div.
我在 div 中有一个选择框，默认情况下不显示，在某些单击事件中，div 的显示属性更改为阻止，但选择下拉列表未显示并显示空白区域。我在同一个触发函数中调用了选择框的 selected() 方法，我正在更改 div 的可见性。
Here is the code of my issue.
这是我的问题的代码。
<div class="controls" style="display:none" id="Department-11">
<select multiple="" class="chosen-select1" id="form-field-select-4" data-placeholder="Choose a Department...">
<option value="Management">Senior Management</option>
<option value="Legal">Legal</option>
<option value="Operations">Operations</option>
<option value="Administration">Administration</option>
<option value="R&D">R&D</option>
<option value="Sales & Marketing">Sales & Marketing</option>
<option value="Finance">Finance</option>
<option value="Technology">Technology</option>
<option value="Customer Service">Customer Service</option>
<option value="Pro Services">Pro Services</option>
<option value="HR">HR</option>
<option value=""></option>
</select>
</div>
<a href="javascript:void(0);" onclick="showselect();">
Show select
</a>
And the JS code is
JS代码是
function showselect() {
$('#Department-11').show();
$(".chosen-select1").chosen();
}
回答by anhtuangv
Another solution is setting element width in initial method as below.
另一种解决方案是在初始方法中设置元素宽度，如下所示。
$(".chosen-select1").chosen({ width:"95%" });
回答by Umar Adil
Add css .chosen-container { width: 220px !important; }
添加css .chosen-container { width: 220px !important; }
回答by Ravindra
Its very simple. In your Jquery add this line. It works for me.
它非常简单。在您的 Jquery 中添加这一行。这个对我有用。
$(".chosen-select1").val("Legal").trigger("chosen:updated");
$(".chosen-select1").val("Legal").trigger("chosen:updated");
