HTML в примерах

       

Select


Тег <select> и обязательный парный ему </select>

Тег <select> создает список или выпадающий список. Каждый элемент списка описывается тегом Option


Атрибуты

sizeЧисло отображаемых элементов. Если равно 1 или не указано, то выводится одна строчка. Если значение больше 1, то выводится список с прокруткой

Пример

Это список с прокруткой Вторая строка Третья строка Четвертая строка

Это выпадающий список Вторая строка Третья строка Четвертая строка

Приведем пример подобия pull-down меню для навигации по сайту

Выбор раздела

1 страница

2 страница

3 страница

4 страница

5 страница

Вот код:

<SELECT NAME="navSelect"

  ONCHANGE="top.location.href =

    this.options[this.selectedIndex].value">

  <OPTION>Выбор раздела</OPTION>

  <OPTION VALUE="1.html">1 страница</OPTION>

  <OPTION VALUE="2.html">2 страница</OPTION>

  <OPTION VALUE="3.html">3 страница</OPTION>

  <OPTION VALUE="4.html">4 страница</OPTION>

  <OPTION VALUE="5.html">5 страница</OPTION>

</SELECT>

Основную работу выполняет обработчик события ONCHANGE. top ссылается на окно браузера, активное в данный момент. top.location.href - URL документа, отображаемого этим окном. Одним из свойств объекта SELECT является коллекция options, которая содержит параметры элементов выбора. Например navSelect.option[1].value содержит значение "index.html". Свойство элемента SELECT selectedIndex - номер выбранного пункта. Элемент this внутри элемента ссылается именно на этот элемент. Вместо него можно было использовать (в Internet Explorer) ссылку document.all.navSelect, но this гораздо короче и работает в обоих браузерах. Я советую вам всегда использовать элемент this, когда это возможно.

Приведем еще один пример, когда пользователь сначала выбирает пункт из списка и потом щелкает на кнопке



Содержание раздела