Option selected

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


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector