Справочник по тегам HTML

Теги HTML

       

Тег SELECT

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

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


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

Пример

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

Вот код:

<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, когда это возможно.

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


Вот код:

<FORM>
SELECT NAME="navSelect"<>
  <OPTION>Выбор раздела</OPTION>
  <OPTION VALUE="index.html">1 страница</OPTION>
  <OPTION VALUE="a.html">2 страница</OPTION>
  <OPTION VALUE="aaa.html">3 страница</OPTION>
</SELECT><BR>
<INPUT TYPE=BUTTON NAME="go" VALUE="Go!"
 ONCLICK="top.location.href =
 this.form.navSelect.options[this.form.navSelect.selectedIndex].value">
</FORM>

Здесь необходимо пояснить, что каждый элемент формы имеет свойство form, которое содержит ссылку на его родительскую форму. Таким образом можно сослаться на любой элемент формы из любого другого элемента, чем мы здесь и воспользовались: this.form.navSelect ссылается именно на элемент выбора.

Категория
Элементы управления тега SELECT

 

 

 

Top.Mail.Ru
Top.Mail.Ru