САЙТЫ  ПОД  КЛЮЧ
ОНЛАЙН-СЕРВИСЫ СПРАВОЧНИКИ SEO-ИНСТРУМЕНТЫ РАЗВЛЕЧЕНИЯ

Теги HTML в примерах

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

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


Атрибуты
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="1.html">1 страница</OPTION>
  <OPTION VALUE="2.html">2 страница</OPTION>
  <OPTION VALUE="3.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 ссылается именно на элемент выбора.


 

Полезный совет

Чтобы быстро прокрутить сайт на одну страницу вниз, нажмите клавишу «Пробел». Чтобы прокрутить страницу вверх, нажмите «Shift» + «Пробел».
Вместо пробела можно использовать клавиши «PgUp» (чтобы подняться вверх) и «PgDn» (чтобы опуститься вниз).
Также для прокрутки страниц можно использовать колесико мышки, для обычной прокрутки страницы крутите колесико вверх и вниз, для быстрой – нажмите и отпустите (или зажмите) колесо мышки и перемещайте ее вверх и вниз по странице.


Наши реквизиты
WMID: 309688839848
WMR: R325885159214
E-mail: 
  BL:Бизнес-уровень [BL]
QR-код сайта
Онлайн-радио
Больше радиостанций