How to use placeholder as default value in select2 framework

by

You have to add an empty option (i.e. <option></option>) as a first element to see a placeholder.

From Select2 official documentation :

“Note that because browsers assume the first option element is selected in non-multi-value select boxes an empty first option element must be provided (<option></option>) for the placeholder to work.”

Example:

<select id="countries">
    <option></option>
    <option value="1">Germany</option>
    <option value="2">France</option>
    <option value="3">Spain</option>
</select>

and the Javascript would be:

$('#countries').select2({
    placeholder: "Please select a country"
});

More Related Contents:

  1. jQuery how to find an element based on a data-attribute value?
  2. Why is my jQuery :not() selector not working in CSS?
  3. Wildcards in jQuery selectors
  4. Set select option ‘selected’, by value
  5. What is fastest children() or find() in jQuery?
  6. Jquery bind double click and single click separately
  7. jQuery or CSS selector to select all IDs that start with some string [duplicate]
  8. Select2 doesn’t work when embedded in a bootstrap modal
  9. How can I detect if a selector returns null?
  10. What CSS3 selectors does jQuery really support, e.g. :nth-last-child()?
  11. Update select2 data without rebuilding the control
  12. jQuery: select an element’s class and id at the same time?
  13. jQuery attribute name contains
  14. jQuery scrollTop not working in Chrome but working in Firefox
  15. First word selector
  16. Find all elements based on ids using regex on jQuery selector
  17. A cleaner way to select by multiple possible attribute values?
  18. jQuery: select all elements of a given class, except for a particular Id
  19. How to select specific form element in jQuery?
  20. Initialising select2 created dynamically
  21. Get the selected option id with jQuery
  22. What JQuery selector excludes items with a parent that matches a given selector?
  23. Get Selected value from Multi-Value Select Boxes by jquery-select2?
  24. Cleanest way to get the next sibling in jQuery
  25. Performance differences between using “:not” and “.not()” selectors?
  26. jQuery selector where text = some value
  27. Performance of jQuery selectors vs local variables
  28. Selectable optgroup using select2
  29. Dynamically add item to jQuery Select2 control that uses AJAX
  30. jquery filtering has + not

Leave a Comment