选择不适用于默认情况下不显示的选择下拉菜单答案

【问题标题】：chosen not working for select drop down which is not displayed by default选择不适用于默认情况下不显示的选择下拉菜单
【发布时间】：2013-10-15 05:06:52
【问题描述】：

我在 div 中有一个选择框，默认情况下不显示，并且在某些单击事件中，div 的显示属性更改为阻止，但选择下拉菜单未显示并且显示空白区域。我在更改 div 可见性的同一触发函数中为选择框调用了 selected() 方法。

这是我的问题的代码。

<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>

而JS代码是

function showselect() {
    $('#Department-11').show();
    $(".chosen-select1").chosen();
}

【问题讨论】：

尝试让chosen() 单独工作。用这个<a href="javascript:showSelect()"></a> 替换您的链接，在showSelect 中，只需$(".chosen-select1").chosen();。您必须检查问题是否仅来自插件。此外，文档说将空选项放在第一位，而不是最后一个。
我已经探索过这个问题，发现
github.com/harvesthq/chosen/issues/795
添加了一个 hack 作为 .chosen-container { width: 220px !important; }
默认情况下，Chosen 会尝试匹配您要替换的选择框的宽度。如果在实例化 Chosen 时隐藏了选择，则必须指定宽度，否则选择将以 0 的宽度显示。 Here is a list of chosen configuration。作为一个干净的解决方案，您可以使用选中的width 选项为其赋予适当的值。