jQuery Select2 placeholder doesn't work
html, javascript, jquery, jquery-select2, twitter-bootstrap
Solution
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
Problem
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/