Select2 multiple box placeholder not showing on hide then make it visible case

Question

I am using select2() in <select multiple>. What I have is a placeholder in that select. What I am doing is initially I am hiding the select containing div and then I am making it visible. In this case initially placeholder not showing.

If we are not doing this hide and block thing then it is working fine.

FIDDLE

Answer 1

(EDITED) Sorry I read the question wrong. I thought it was about regular selects not multiples.

I've checked your fiddle.

1. This contains 2 multiples. <select multiple id="e1" style="width:100%" multiple data-placeholder="Choose country(s)*">. I don't know if this is intentional. But you should remove one.
2. The input element select2 has it's width set to 0px when you set display: none. You need to increase the width to an appropriate size.
3. I added $('.select2-input, .select2-default', $("#divid")).css('width', '100%'); to your code and this solved your issue.

Snippet (non-functional, needs select2 libraries):

$("#e1").select2();
    $('.select2-input, .select2-default', $("#divid")).css('width', '100%');
    $("#divid").css("display","block");

<div id="divid" style="display:none;">

<select id="e1" style="width:100%" multiple data-placeholder="Choose country(s)*">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>     
</div>