Page 138 - 6108
P. 138
Списки
Для створення списку використовується html-елемент select. Причому з
його допомогою можна створювати як випадаючі списки, так і звичайні з
ординарним або множинним вибором.
<form name = "myForm">
<select name = "language" size = "4">
<option value = "JS" selected = "selected"> JavaScript
</option>
<option value = "Java"> Java </option>
<option value = "C #"> C # </option>
<option value = "C ++"> C ++ </option>
</select>
</form>
Атрибут size дозволяє встановити, скільки елементів будуть
відображатися одномоментно в списку. Значення size = "1" відображає
тільки один елемент списку, а сам список стає випадаючим. Якщо встановити у
елемента select атрибут multiple, то в списку можна вибрати відразу кілька
значень.
Кожен елемент списку представлений html-елементом option, у якого є
label і є значення у вигляді атрибуту value.
В JavaScript елементу select відповідає об'єкт HTMLSelectElement, а
елементу option – об'єкт HtmlOptionElement або просто Option.
Об’єкт HTMLSelectElement має властивості, що відповідають HTML
атрибутам елементу <select>, а також ряд додаткових властивостей, таких як:
options – повертає колекцію елементів <option>, що містяться в
елементі.
length – кількість елементів <option> в елементі.
selectedIndex – повертає індекс першого виділеного елемента
<option>. Значення -1 вказує, що елемент не вибрано.
selectedOptions – повертає колекцію вибраних елементів <option>.
type – повертає а повертає "select-multiple", якщо встановлена
властивість multiple = true; інакше "select-one".
Методи:
add() – додає елемент до колекції елементів <option>.
item() – повертає елемент з колекції <option> для вибраного елемента
<select>.
namedItem() – повертає елемент у колекції <option> за вказаним ім'ям.
Аргумент може збігатися як з ідентифікатором, так і з іменем атрибута вузла
option.
remove() – видаляє елемент за вказаним індексом з колекції <option>
для вибраного елемента <select>.
Всі елементи списку в javascript доступні через колекцію options. А
кожен об'єкт HTMLOptionElement має властивості:
index – індекс в колекції options,
text – відображається текст елементу
value – значення елемента.