CODEWITHSUNDEEP
jqueryjquery-chosen
Umar Adil
Umar Adil

Reputation: 5277

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

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

Upvotes: 13

Views: 29664

Answers (3)

Ravindra Kumar
Ravindra Kumar

Reputation: 1940

Its very simple. In your Jquery add this line. It works for me.

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

Upvotes: 1

anhtuangv
anhtuangv

Reputation: 575

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

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

Upvotes: 30

Umar Adil
Umar Adil

Reputation: 5277

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

Upvotes: 21

Related Questions