diff --git a/docs/_includes/options/selections/clearing-selections.html b/docs/_includes/options/selections/clearing-selections.html index 2e81614b..fb393bd5 100644 --- a/docs/_includes/options/selections/clearing-selections.html +++ b/docs/_includes/options/selections/clearing-selections.html @@ -3,6 +3,23 @@ Can I allow users to clear their selections? +

+ You can allow people to clear their current selections with the allowClear option when initializing Select2. Setting this option to true will enable an "x" icon that will reset the selection to the placeholder. +

+ +
+$('select').select2({
+  placeholder: 'This is my placeholder',
+  allowClear: true
+});
+
+ +

+ Why is a placeholder required? +

+ + {% include options/not-written.html %} +

The "x" icon is not clearing the selection

diff --git a/docs/_includes/options/selections/placeholder.html b/docs/_includes/options/selections/placeholder.html index bcb08b5f..a6d29a1f 100644 --- a/docs/_includes/options/selections/placeholder.html +++ b/docs/_includes/options/selections/placeholder.html @@ -7,6 +7,12 @@ Select2 supports displaying a placeholder by default using the placeholder option. This can be either a data object matching the placeholder option, or a string to display as the placeholder if you are using a blank placeholder option.

+
+$('select').select2({
+  placeholder: 'Select an option'
+});
+
+

My first option is being displayed instead of my placeholder

@@ -35,12 +41,37 @@ The placeholder option allows you to pass in a data object instead of just a string if you need more flexibility. The id of the data object should match the value of the placeholder option.

+
+$('select').select2({
+  placeholder: {
+    id: '-1', // the value of the option
+    text: 'Select an option'
+  }
+});
+
+

Can I change how the placeholder looks?

- The placeholder option should go through the standard templating methods, including templateSelection, so you can change how it is displayed. + When using Select2 when only a single selection can be made, the placeholder option will be passed through the standard templating methods, incluidng the templateSelection option, so you are able to change how it is displayed. +

+ +
+$('select').select2({
+  templateResult: 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. You can cusotmize the display of this placholder using CSS, as explained in the following Stack Overflow answer: Change an input's HTML5 placeholder color with CSS

@@ -48,6 +79,6 @@

- Select2 uses the native placeholder attribute on input boxes for the multiple select, and that attribute is not supported in older versions of Internet Explorer. You need to include Placeholders.js on your page, or use the full build, in order to add placeholder attribute support to input boxes. + Select2 uses the native placeholder attribute on input boxes for the multiple select, and that attribute is not supported in older versions of Internet Explorer. You need to include Placeholders.js on your page, or use the full build, in order to add placeholder attribute support to input boxes.

\ No newline at end of file diff --git a/docs/_includes/options/selections/templating.html b/docs/_includes/options/selections/templating.html index 7063561a..2e9fad57 100644 --- a/docs/_includes/options/selections/templating.html +++ b/docs/_includes/options/selections/templating.html @@ -3,6 +3,20 @@ How can I customize the way selections are displayed? +

+ When a selection is made by the user Select2 will display the text of the option by default, just like how it is displayed in a standard select box. You can override the display of the selection by setting the templateSelection option to a JavaScript function. +

+ +
+function template(data, container) {
+  return data.text;
+}
+
+$('select').select2({
+  templateSelection: template
+});
+
+

Nothing is being displayed when I select an option