A traditional <select> box contains any number of <option> elements. Each of these is rendered as an option in the dropdown menu. Select2 preserves this behavior when initialized on a <select> element that contains <option> elements, converting them into its internal JSON representation:
{ "id": "value attribute" || "option text", "text": "label attribute" || "option text", "element": HTMLOptionElement }<optgroup> elements will be converted into data objects using the following rules:
{ "text": "label attribute", "children": [ option data object, ... ], "element": HTMLOptGroupElement }Options sourced from other data sources must conform to this this same internal representation. See «The Select2 data format» for details.
Dropdown option groups
In HTML, <option>
elements can be grouped by wrapping them with in an
<optgroup> element:
<select> <optgroup label="Group Name"> <option>Nested option</option> </optgroup> </select>Select2 will automatically pick these up and render them appropriately in the dropdown.
Hierarchical options
Only a single level of nesting is allowed per the HTML specification. If you nest an <optgroup> within another <optgroup>, Select2 will not be able to detect the extra level of nesting and errors may be triggered as a result.
Furthermore, <optgroup> elements cannot be made selectable. This is a limitation of the HTML specification and is not a limitation that Select2 can overcome.
If you wish to create a true hierarchy of selectable options, use an <option> instead of an <optgroup> and change the style with CSS. Please note that this approach may be considered «less accessible» as it relies on CSS styling, rather than the semantic meaning of <optgroup>, to generate the effect.
Disabling options
Select2 will correctly handle disabled options, both with data coming from a standard select (when the disabled attribute is set) and from remote sources, where the object has disabled: true
set.
<select class="js-example-disabled-results"> <option value="one">First</option> <option value="two" disabled="disabled">Second (disabled)</option> <option value="three">Third</option> </select>select2.org
Предназначен для создания списка предложенных пунктов, из которого пользователь может выбрать один или несколько. Ограничивается тегами <select>…</select>.
Атрибуты тега <select>
- autofocus
- Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:
<select autofocus>...</select> <select autofocus="">...</select> <select autofocus="autofocus">...</select> - disabled
- Блокирует выбор из списка. Значение можно задать тремя способами:
<select disabled>...</select> <select disabled="">...</select> <select disabled="disabled">...</select> - multiple
- Позволяет выбрать несколько пунктов списка одновременно. Следует обратить внимание, что при множественном выборе в потоке данных от одной формы может присутствовать несколько переменных с одним и тем же именем.
аша программа обработки должна предусматривать подобные ситуации и корректно их обрабатывать. - name
- Имя списка. Обязательный атрибут.
- required
- Обязательно должен быть выбран пункт с непустым значением. Если это не выполнено, то браузер выведет сообщение, а форма на сервер отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может (не работает в IE и Safari).
- size
- Вертикальный размер окна списка. Если атрибут опущен или его значение равно 1, выводится всплывающий список пунктов. Если указано число больше 1, то пункты списка выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество пунктов списка, то добавляются пустые пункты. При их выборе пользователем возвращаются пустые поля.
Для тега <select> также доступны общие атрибуты и атрибуты обработки событий.
Пункт списка <option>
Каждый пункт списка ограничивается тегами <option>…</option>. Закрывающий тег необязателен.
Атрибуты тега <option>
- disabled
- Блокирует выбор пункта списка.
- label
- Метка пункта списка. Если указан атрибут label, то в списке выводится его значение вместо текста внутри тега <option> (в Firefox не работает).
- selected
- Пункт списка, выбранный по умолчанию.
- value
- Значение, передаваемое сценарию в случае выбора пользователем определенного пункта. Если этот атрибут отсутствует, то в сценарий будет отослан текст, расположенный сразу после тега <option>.
Любые теги,помещенные внутри тега option, будут проигнорированы.
Для тега <option> также доступны общие атрибуты и атрибуты обработки событий.
Пример выпадающего списка
<form> <select name="s1"> <option value="tea">Чай</option> <option value="coffee">Кофе</option> <option value="milk">Молоко</option> <option value="ham">Ветчина</option> <option value="cheese">Сыр</option> </select> </form>Пример списка с множественным выбором
<form> <select name="s2" size="5" multiple> <option value ="tea">Чай</option> <option value ="coffee" selected>Кофе</option> <option value ="milk">Молоко</option> <option value ="ham">Ветчина</option> <option value ="cheese">Сыр</option> </select> </form>Группа пунктов списка <optgroup>
Контейнер <optgroup>…</optgroup> позволяет группировать пункты списка. В этом случае названия каждой группы будут выделены жирным, а некоторые браузеры еще добавляют отступы, так что пользователю при выборе необходимого пункта ориентироваться гораздо проще.
Для тега <optgroup> доступны общие атрибуты и атрибуты обработки событий.
Пример группировки пунктов списка
<form> <select name="s3" size="10"> <optgroup label="HTML"> <option value="h3">HTML3.2</option> <option value="h4">HTML4.0</option> <option value="h5">HTML5</option> </optgroup> <optgroup label="CSS"> <option value="css1">CSS1</option> <option value="css2">CSS2</option> <option value="css3">CSS3</option> </optgroup> <option value="js">JavaScript</option> <option value="dhtml">DHTML</option> </select> </form>
Более того, для дополнительной наглядности каждую группу с помощью CSS можно раскрасить в свой цвет.
htmlweb.ru
