It is recommended that you declare your configuration options for Select2
when initializing Select2. You can also define your configuration options
by using the HTML5 data-*
attributes, which will override
any options set when initializing Select2 and any defaults.
camelCase
options be written?
This means that if you declare your <select>
tag as...
<select data-tags="true" data-placeholder="Select an option" data-allow-clear="true"></select>
Will be interpreted the same as initializing Select2 as...
$("select").select2({ tags: "true", placeholder: "Select an option", allowClear: true });
You can also define nested configurations, which are typically needed for
options such as AJAX. Each level of nesting should be separated by two
dashes (--
) instead of one. Due to
a jQuery bug,
nested options using data-*
attributes
do not work in jQuery 1.x.
<select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"></select>
Which will be interpreted the same as initializing Select2 with...
$("select").select2({ ajax: { url: "http://example.org/api/test", cache: "true" } });
The value of the option is subject to jQuery's parsing rules for HTML5 data attributes.