jQuery Select2 placeholder doesn't work

Question

I am following this doc http://ivaynberg.github.io/select2/ to create select box with placeholder. My problem is the placeholder doesn't work. Can you help to fix this code?

Code: Also at http://jsfiddle.net/VwGGU/3/

HTML:

<select style="width:300px" id="source">     <optgroup label="Alaskan/Hawaiian Time Zone">         <option value="AK">Alaska</option>         <option value="HI">Hawaii</option>     </optgroup>     <optgroup label="Pacific Time Zone">         <option value="CA">California</option>         <option value="NV">Nevada</option>         <option value="OR">Oregon</option>         <option value="WA">Washington</option>     </optgroup> </select> 

Javascript:

$("#e2").select2({     placeholder: "Select a State",     allowClear: true }); 

The example above shows "Alaska" instead of "Select a State" as placeholder.

UPDATE 1:

Added select2.js now and empty option. It still doesn't show placeholder

HTML

<select style="width:300px" id="source" placeholder="testt test">     <option></option>     <optgroup label="Alaskan/Hawaiian Time Zone">         <option value="AK">Alaska</option>         <option value="HI">Hawaii</option>     </optgroup>     <optgroup label="Pacific Time Zone">         <option value="CA">California</option>         <option value="NV">Nevada</option>         <option value="OR">Oregon</option>         <option value="WA">Washington</option>     </optgroup> 

JS

$(document).ready(function () {     $("#source").select2({         placeholder: "Select a State",         allowClear: true     }); }); 

http://jsfiddle.net/VwGGU/6/

UPDATE 2:

Strange that jsfiddle gave error when I copied .css and .js link from github. This version works

HTML

<select style="width:300px" id="source" >     <option></option>     <optgroup label="Alaskan/Hawaiian Time Zone">         <option value="AK">Alaska</option>         <option value="HI">Hawaii</option>     </optgroup>     <optgroup label="Pacific Time Zone">         <option value="CA">California</option>         <option value="NV">Nevada</option>         <option value="OR">Oregon</option>         <option value="WA">Washington</option>     </optgroup> 

JS

$(document).ready(function () {     $("#source").select2({         placeholder: "Select a State",         allowClear: true     }); }); 

http://jsfiddle.net/VwGGU/9/

Answer 1

Have you done this:

When placeholder is used for a non-multi-value select box, it requires that you include an empty tag as your first option

Answer 2

Your select element have an id of source but you are targeting an id of e2 in your jQuery selector, and you need an empty <option> tag