Menu
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/
842
$('select'). select2({ templateSelection: function (data) { if (data.id === '') { // adjust for custom placeholder values return 'Custom styled placeholder text'; } return data. text; } }); When multiple selections are allowed, the placeholder will be displayed using the placeholder attribute on the search box.
Data placeholders are used to describe the mapping between the data retrieved from a data source and the layers composing the layout of a data-driven widget.
Adding the following is enough: . select2-container . select2-choice { height: 200px; } To have it apply only after an object is selected, add/modify the corresponding css on a change event or similar. This changes the height of the select2 input field, which is not what was asked for.
In order to clear the selection of those values which are selected using a Select2 drop down,we can use the empty() function. The dropdown can be reset using Jquery. $("#select2_example"). empty();
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
177
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
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
