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