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
你的select
元素的id为source
但是你的jQuery选择器中的id
是e2
,你需要一个空的<option>
标签
$selectElement.select2({
minimumResultsForSearch: -1,
placeholder: 'Select Relatives'
}).on('select2-opening', function() {
$(this).closest('li').find('input').attr('placeholder','Select Relative');
});
<select id="select2Box" class="form-control brand-select">
<option value="">Select Franchise</option>
</select>
Try this.In html you write the following code.
<select class="select2" multiple="multiple" placeholder="Select State">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</select>
And in your script write the below code.
<script>
$( ".select2" ).select2( { } );
</script>
You should add an empty option tag to the select.
<select data-placeholder="Chose number" data-allow-clear="true" data-width="50%">
<option></option>
<option value="1">Number one</option>
<option value="2">Number two</option>
<option value="3">Number three</option>
</select>
Check this link Placeholder only works when there's an empty option element
<script>
$( "#id").select2({ placeholder: "Select Franchise" });
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.