How do I display chosen-box instantly?

Question

I have problem with chosen. I have code

<div id="name_search">
    <select class="chosen" style="width:200px;">
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Aland Islands">Aland Islands</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
        <option value="American Samoa">American Samoa</option>
        <option value="Andorra">Andorra</option>
    </select>
</div>

And i have JS code

$(".chosen").chosen();

It's working but I must click on chosen element to see full list of countries. I need to see all countries instant after show up chosen, but <ul> list is empty. How can i do it?

---

But this code:

$(document).ready(function(){ 
    $(".chosen").chosen();
    $(".chosen-container").click(function() {
        console.log('clicked');
        return false;
});
    $('.chosen-container').trigger('click');


});

prints "clicked" to firebug console;

---

It's still not working.

List

is empty too after run your code:

$(window).load(function(){
    $(".chosen").chosen();
    $('.chosen-container').trigger('click');
});

i dont know what is wrong and i have no idea? I simulated click on container with:

$('.chosen-container').click(), but its not working

Answer 1

You can manually trigger the click function to show all the countries on page load. Check this

$(window).load(function(){
    $(".chosen").chosen();
    $('.chzn-container').trigger('click')
});

FIDDLE here