Поля select.

Поля select похожи на радиокнопки – они также позволяют выбрать из нескольких вариантов. Но если радиокнопки позволяют нам контролировать раскладку вариантов, то вид поля <select> определяет браузер.

У полей select есть вариант, больше похожий на список галочек, чем на радиокнопки. При наличии атрибута multiple тег <select> позволит выбирать любое количество вариантов, а не один.

<select multiple>

<орtiоn>Блины</орtiоn>

<орtiоn>Запеканка</орtiоn>

<орtiоn>Мороженка </option>

</select>

В большинстве браузеров внешний вид поля будет отличаться от поля с единственным вариантом выбора, который обычно выглядит как выпадающее меню.

Атрибут size тега <select> используется для задания количества вариантов, которые видны одновременно – так вы можете влиять на внешний вид выпадушки. К примеру, назначив size “3”, вы увидите три строки одновременно, безотносительно того, присутствует ли опция multiple.

У каждого тега <option> есть значение. Его можно определить атрибутом value, но если он не задан, то значение тега определяет текст, находящийся внутри тега <option>..</option>. Свойство value элемента отражает текущий выбранный вариант. Для поля с возможностью выбора нескольких вариантов это свойство не особо нужно, т. к. в нём будет содержаться только один из нескольких выбранных вариантов.

К тегу <option> поля <select> можно получить доступ как к массивоподобному объекту через свойство options. У каждого варианта есть свойство selected, показывающее, выбран ли сейчас этот вариант. Свойство также можно менять, чтобы вариант становился выбранным или не выбранным.

Следующий пример извлекает выбранные значения из поля select и использует их для создания двоичного числа из битов. Нажмите Ctrl (или Command на Маке), чтобы выбрать несколько значений сразу.

<select multiple>

<option value="1">0001</option>

<option value="2">0010</option>

<option value="4">0100</option>

<option value="8">1000</option>

</select> = <span id="output">0</span>

<script>

Var select = document.querySelector("select");

Var output = document.querySelector("#output");

Select.addEventListener("change", function() {

Var number = 0;

For (var i = 0; i < select.options.length; i++) {

Var option = select.options[i];

If (option.selected).

Number += Number(option.value);

}

Output.textContent = number;

});

</script>