chosen not working for select drop down which is not displayed by default

Question

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.

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

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

Answer 1

Another solution is setting element width in initial method as below.

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

Answer 2

Add css .chosen-container { width: 220px !important; }