© 2003 - 2019

Тег <SELECT>

Объектная модель Internet Explorer
Объектная модель IE
Введение
Window
Свойства
Name
Parent
Status
Методы
Alert
Close
Confirm
moveTo
Navigate
Open
Prompt
resizeTo
SetInterval
SetTimeOut
События
Onload
OnUnload
Document
Свойства
ALinkColor
bgColor
charset
Cookie
defaultCharset
fgColor
fileCreatedDate
fileSize
lastModified
LinkColor
mimeType
referrer
Title
URL
VLinkColor
Navigator
Свойства
appCodeName
appName
appVersion
cookieEnabled
javaEnabled
userAgent
History
Свойства
length
Методы
Back
Location
Свойства
host
href
Методы
replace
Screen
Свойства
colorDepth
height, width
External
Методы
AddFavorite
Тег <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 ссылается именно на элемент выбора.

SEO  Аналитика  Юзабилити  SMO  Яндекс  Апдейты  тИЦ  Google
HTML CSS DHTML ОбМ IE