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

Question

我在 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();
}

Answer 1

另一种解决方案是在初始方法中设置元素宽度，如下所示。

$(".chosen-select1").chosen({ width:"95%" });

Answer 2

添加CSS.chosen-container { width: 220px !important; }

Answer 3

它非常简单。在您的 Jquery 中添加此行。这个对我有用。

$(".chosen-select1").val("Legal").trigger("chosen:updated");