На главную страницу
Форум txt.version   




Статья :: Select
Оглавление | Назад | Вперёд | Индекс

Select

Список выбора на HTML-форме. Пользователь может выбрать один или более элементов из списка selection в зависимости от того, как список создан.

Клиентский объект

Реализован в

JavaScript 1.0

JavaScript 1.1: добавлено свойство type; введена возможность добавлять и удалять опции.

JavaScript 1.2:добавлен метод handleEvent.

Создание

HTML-тэгом SELECT. Для данной формы машина выполнения JavaScript создаёт соответствующие объекты Select для каждого списка selection и помещает эти объекты в массив elements соответствующего объекта Form. Вы получаете доступ к объекту Select по индексу в этом массиве. Можно индексировать массив по числам или, если имеются, по значениям атрибутов NAME.

Машина выполнения создаёт также объекты Option для каждого тэга OPTION внутри тэга SELECT.

Обработчики событий

Описание

На рисунке показана форма с двумя списками selection. Пользователь может выбрать один элемент из списка слева и несколько элементов в списке справа:

Объект Select это элемент формы, он обязан быть определён в тэге FORM.

Свойства. Резюме.

Свойство Описание
form

Специфицирует форму, содержащую список selection.

length

Отражает количество опций в списке selection.

name

Отражает атрибут NAME.

options

Отражает тэги OPTION.

selectedIndex

Отражает индекс выбранной опции (или первой выбранной опции, если выбрано несколько опций).

type

Специфицирует, что представляемый им объект это список selection и может ли он иметь одну или более выбранных опций.

Методы. Резюме.

Метод Описание
blur

Убирает фокус со списка selection.

focus

Передаёт фокус списку selection.

handleEvent

Вызывает обработчик для специфицированного события.

Кроме того, этот объект наследует методы watch и unwatch из объекта Object.

Примеры

Пример 1. Отображаются два списка selection. В первом списке пользователь может выбрать только один элемент; во втором списке можно выбрать несколько элементов.

Choose the music type for your free CD:
<SELECT NAME="music_type_single">
   <OPTION SELECTED> R&B
   <OPTION> Jazz
   <OPTION> Blues
   <OPTION> New Age
</SELECT>
<P>Choose the music types for your free CDs:
<BR><SELECT NAME="music_type_multi" MULTIPLE>
   <OPTION SELECTED> R&B
   <OPTION> Jazz
   <OPTION> Blues
   <OPTION> New Age
</SELECT>

Пример 2. Отображаются два списка selection, которые позволяют выбрать месяц и число. Эти списки selection инициализируются текущей датой. Пользователь может изменить месяц и число, используя списки selection или выбрав предустановленные даты радио-кнопками. Текстовые поля на форме отображают значения свойств объектов Select и указывают выбранную дату и то, является ли эта дата Cinco de Mayo.

<HTML>
<HEAD>
<TITLE>Select object example</TITLE>
</HEAD>
<BODY>
<SCRIPT>
var today = new Date()
//---------------
function updatePropertyDisplay(monthObj,dayObj) {
   // Get date strings
   var monthInteger, dayInteger, monthString, dayString
   monthInteger=monthObj.selectedIndex
   dayInteger=dayObj.selectedIndex
   monthString=monthObj.options[monthInteger].text
   dayString=dayObj.options[dayInteger].text
   // Display property values
   document.selectForm.textFullDate.value=monthString + " " + dayString
   document.selectForm.textMonthLength.value=monthObj.length
   document.selectForm.textDayLength.value=dayObj.length
   document.selectForm.textMonthName.value=monthObj.name
   document.selectForm.textDayName.value=dayObj.name
   document.selectForm.textMonthIndex.value=monthObj.selectedIndex
   document.selectForm.textDayIndex.value=dayObj.selectedIndex
   // Is it Cinco de Mayo?
   if (monthObj.options[4].selected && dayObj.options[4].selected)
      document.selectForm.textCinco.value="Yes!"
   else
      document.selectForm.textCinco.value="No"
}
</SCRIPT>
<!--------------->
<FORM NAME="selectForm">
<P><B>Choose a month and day:</B>
Month: <SELECT NAME="monthSelection"
   onChange="updatePropertyDisplay(this,document.selectForm.daySelection)">
   <OPTION> January <OPTION> February <OPTION> March
   <OPTION> April <OPTION> May <OPTION> June
   <OPTION> July <OPTION> August <OPTION> September
   <OPTION> October <OPTION> November <OPTION> December
</SELECT>
Day: <SELECT NAME="daySelection"
   onChange="updatePropertyDisplay(document.selectForm.monthSelection,this)">
   <OPTION> 1 <OPTION> 2 <OPTION> 3 <OPTION> 4 <OPTION> 5
   <OPTION> 6 <OPTION> 7 <OPTION> 8 <OPTION> 9 <OPTION> 10
   <OPTION> 11 <OPTION> 12 <OPTION> 13 <OPTION> 14 <OPTION> 15
   <OPTION> 16 <OPTION> 17 <OPTION> 18 <OPTION> 19 <OPTION> 20
   <OPTION> 21 <OPTION> 22 <OPTION> 23 <OPTION> 24 <OPTION> 25
   <OPTION> 26 <OPTION> 27 <OPTION> 28 <OPTION> 29 <OPTION> 30
   <OPTION> 31
</SELECT>
<P><B>Set the date to: </B>
<INPUT TYPE="radio" NAME="dateChoice"
   onClick="
      monthSelection.selectedIndex=0;
      daySelection.selectedIndex=0;
      updatePropertyDisplay
         document.selectForm.monthSelection,document.selectForm.daySelection)">
   New Year's Day
<INPUT TYPE="radio" NAME="dateChoice"
   onClick="
      monthSelection.selectedIndex=4;
      daySelection.selectedIndex=4;
      updatePropertyDisplay
         (document.selectForm.monthSelection,document.selectForm.daySelection)">
   Cinco de Mayo
<INPUT TYPE="radio" NAME="dateChoice"
   onClick="
      monthSelection.selectedIndex=5;
      daySelection.selectedIndex=20;
      updatePropertyDisplay
         (document.selectForm.monthSelection,document.selectForm.daySelection)">
   Summer Solstice
<P><B>Property values:</B>
<BR>Date chosen: <INPUT TYPE="text" NAME="textFullDate" VALUE="" SIZE=20">
<BR>monthSelection.length<INPUT TYPE="text" NAME="textMonthLength" VALUE="" SIZE=20">
<BR>daySelection.length<INPUT TYPE="text" NAME="textDayLength" VALUE="" SIZE=20">
<BR>monthSelection.name<INPUT TYPE="text" NAME="textMonthName" VALUE="" SIZE=20">
<BR>daySelection.name<INPUT TYPE="text" NAME="textDayName" VALUE="" SIZE=20">
<BR>monthSelection.selectedIndex
   <INPUT TYPE="text" NAME="textMonthIndex" VALUE="" SIZE=20">
<BR>daySelection.selectedIndex<INPUT TYPE="text" NAME="textDayIndex" VALUE="" SIZE=20">
<BR>Is it Cinco de Mayo? <INPUT TYPE="text" NAME="textCinco" VALUE="" SIZE=20">
<SCRIPT>
document.selectForm.monthSelection.selectedIndex=today.getMonth()
document.selectForm.daySelection.selectedIndex=today.getDate()-1
updatePropertyDisplay(document.selectForm.monthSelection,document.selectForm.daySelection)
</SCRIPT>
</FORM>
</BODY>
</HTML>

Пример 3. Добавление опции конструктором Option. В этом примере создаются два объекта Select, один с и другой без атрибута MULTIPLE. Сначала опции ни для одного из объектов не определены. Если пользователь щёлкает кнопку, ассоциированную с объектом Select, функция populate создаёт четыре опции для Select-объекта и выбирает первую опцию.

<SCRIPT>
function populate(inForm) {
   colorArray = new Array("Red", "Blue", "Yellow", "Green")
   var option0 = new Option("Red", "color_red")
   var option1 = new Option("Blue", "color_blue")
   var option2 = new Option("Yellow", "color_yellow")
   var option3 = new Option("Green", "color_green")
   for (var i=0; i < 4; i++) {
      eval("inForm.selectTest.options[i]=option" + i)
      if (i==0) {
         inForm.selectTest.options[i].selected=true
      }
   }
   history.go(0)
}
</SCRIPT>

<H3>Select Option() constructor</H3>
<FORM>
<SELECT NAME="selectTest"></SELECT><P>
<INPUT TYPE="button" VALUE="Populate Select List" onClick="populate(this.form)">
<P>
</FORM>
<HR>
<H3>Select-Multiple Option() constructor</H3>
<FORM>
<SELECT NAME="selectTest" multiple></SELECT><P>
<INPUT TYPE="button" VALUE="Populate Select List" onClick="populate(this.form)">
</FORM>

Пример 4. Удаление опции. Следующая функция удаляет опцию из Select-объекта.

function deleteAnItem(theList,itemNo) {
   theList.options[itemNo]=null
   history.go(0)
}

См. также

Form, Radio

blur


Убирает фокус со списка selection.

Метод из

Select

Реализован в

JavaScript 1.0

Синтаксис

blur()

Параметры

Отсутствуют.

См. также

Select.focus

focus


Переходит к списку selection и передаёт ему фокус.

Метод из

Select

Реализован в

JavaScript 1.0

Синтаксис

focus()

Параметры

Отсутствуют.

Описание

Используйте метод focus для перехода к списку selection и передачи ему фокуса.

См. также

Select.blur

form


Ссылка объекта, специфицирующая форму, содержащую список selection.

Свойство из

Select

Только для чтения

Реализовано в

JavaScript 1.0

Описание

Каждый элемент формы имеет свойство form, которое является ссылкой на родительскую форму элемента. Это свойство используется в основном в обработчиках событий, где может понадобиться обратиться к другому элементу текущей формы.

См. также

Form

handleEvent


Вызывает обработчик для специфицированного события.

Метод из

Select

Реализован в

JavaScript 1.2

Синтаксис

handleEvent(event)

Параметр

event

Имя события, для которого объект имеет обработчик.

length


Количество опций в списке selection.

Свойство из

Select

Только для чтения

Реализовано в

JavaScript 1.0

Описание

Это свойство имеет то же значение, что и Option.length.

name


Строка, специфицирующая имя списка selection.

Свойство из

Select

Реализовано в

JavaScript 1.0

Безопасность

JavaScript 1.1. Это свойство разрушено по умолчанию. О разрушении данных см. книгу Клиентский JavaScript. Руководство.

Описание

Свойство name сначала отражает значение атрибута NAME. Изменение свойства name переопределяет эту установку. Свойство name не выводится на экран; оно используется для обращения к списку программно.

Если несколько объектов на одной форме имеют одинаковые значения атрибута NAME, автоматически создаётся массив с данным именем. Каждый элемент массива представляет отдельный объект Form. Элементы индексируются в порядке расположения в исходном коде, начиная с 0. Например, если два элемента Text и элемент Select на одной форме имеют атрибуты NAME со значением "myField", создаётся массив из элементов myField[0], myField[1] и myField[2]. Вы должны знать о возможности возникновения такой ситуации в вашем коде и знать также, ссылается ли myField на один элемент или на массив элементов.

Пример

Здесь функция valueGetter использует цикл for для итерации по массиву элементов на форме valueTest. Окно msgWindow отображает имена всех элементов формы:

newWindow=window.open("http://home.netscape.com")
function valueGetter() {
   var msgWindow=window.open("")
   for (var i = 0; i < newWindow.document.valueTest.elements.length; i++) {
      msgWindow.document.write(newWindow.document.valueTest.elements[i].name + "<BR>")
   }
}

options


Массив, соответствующий опциям Select-объекта в порядке их появления в исходном коде.

Свойство из

Select

Только для чтения

Реализовано в

JavaScript 1.0

Описание

Вы можете обратиться к опции объекта Select с помощью массива options. Этот массив содержит вхождения для каждой опции объекта Select (тэг OPTION) в порядке расположения в исходном коде. Например, если Select-объект musicStyle имеет три опции, Вы можете получить к ним доступ так: musicStyle.options[0], musicStyle.options[1], musicStyle.options[2].

Для получения количества опций списка selection Вы можете использовать свойство Select.length или length массива options. Например, можно получить количество опций в списке musicStyle с помощью одного из следующих выражений:

musicStyle.length
musicStyle.options.length

Вы можете добавлять опции в список и удалять их, используя этот массив. Чтобы добавить или заменить опцию в существующем объекте Select, Вы присваиваете новый Option-объект в нужное место массива. Например, чтобы создать новый Option-объект jeans и добавить его в конец списка myList, Вы можете использовать следующий код:

jeans = new Option("Blue Jeans", "jeans", false, false);
myList.options[myList.length] = jeans;

Для удаления опции из Select-объекта Вы устанавливаете соответствующий индекс массива options в null. Удаление опции сжимает массив опций. Например, предположим, что myList имеет 5 элементов, значение четвёртого элемента - "foo", и Вы выполняете следующий оператор:

myList.options[1] = null

Теперь myList содержит 4 элемента, а значение третьего элемента - "foo".

После удаления опции Вы обязаны обновить документ, используя history.go(0). Этот оператор обязан быть последним. Когда документ перезагружается, значения переменных теряются, если они не сохранены в куках или в значениях элементов формы.

Вы можете определить, какая опция списка selection выбрана в данный момент, используя свойство selectedIndex массива options или сам объект Select. То есть, следующие выражения возвращают одинаковые значения:

musicStyle.selectedIndex
musicStyle.options.selectedIndex

Дополнительно об этом свойстве см. Select.selectedIndex.

Для объектов Select, допускающих возможность множественного выбора (то есть если тэг SELECT имеет атрибут MULTIPLE), свойство selectedIndex не очень подходит для использования. В этом случае оно возвращает индекс первого выбора. Чтобы найти все выбранные опции, Вы должны пройти циклом по опциям и проверить каждую опцию индивидуально. Например, чтобы напечатать список всех выбранных опций в selection-списке mySelect, Вы можете использовать такой код:

document.write("You've selected the following options:\n")
for (var i = 0; i < mySelect.options.length; i++) {
   if (mySelect.options[i].selected)
      document.write(" mySelect.options[i].text\n")
}

Вообще, при работе с отдельными опциями списка selection Вы работаете с соответствующим Option-объектом.

selectedIndex


Целое число, специфицирующее индекс выбранной опции в объекте Select.

Свойство из

Select

Реализовано в

JavaScript 1.0

Безопасность

JavaScript 1.1. Это свойство разрушено по умолчанию. О разрушении данных см. книгу Клиентский JavaScript. Руководство.

Описание

Опции в объекте Select индексируются в том порядке, в котором они определены, начиная с индекса 0. Вы можете установить свойство selectedIndex в любое время. Вид объекта Select обновляется сразу после установки свойства selectedIndex.

Если ни одна опция не выбрана, selectedIndex имеет значение -1.

Вообще свойство selectedIndex больше подходит для Select-объектов, которые создаются без атрибута MULTIPLE. Если Вы вычисляете selectedIndex, когда выбраны несколько опций, свойство selectedIndex специфицирует индекс только первой опции. Установка selectedIndex очищает любые другие выбранные опции в объекте Select.

Свойство Option.selected больше подходит для работы с теми объектами Select, которые создаются с атрибутом MULTIPLE. С помощью свойства Option.selected Вы можете вычислять каждую опцию массива options для определения множественного выбора, а также можете выбрать отдельные опции без очистки статуса выбора других опций.

Пример

Здесь функция getSelectedIndex возвращает индекс выбора в объекте musicType Select:

function getSelectedIndex() {
   return document.musicForm.musicType.selectedIndex
}

Предполагается, что Select-объект похож на следующий:

<SELECT NAME="musicType"> 
   <OPTION SELECTED> R&B
   <OPTION> Jazz
   <OPTION> Blues
   <OPTION> New Age
</SELECT>

См. также

Option.defaultSelected, Option.selected

type


Для всех Select-объектов, созданных с ключевым словом MULTIPLE, значение свойства type будет "select-multiple". Для Select-объектов, созданных без этого ключевого слова, значение свойства type будет "select-one". Это свойство специфицирует тип элемента формы.

Свойство из

Select

Только для чтения

Реализовано в

JavaScript 1.1

Пример

Здесь записывается значение свойства type каждого элемента формы.

for (var i = 0; i < document.form1.elements.length; i++) {
   document.writeln("<BR>type is " + document.form1.elements[i].type)
}
Оглавление | Назад | Вперёд | Индекс

Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation

Select

страницы в данном разделе 
 ancor  applet
 area.htm  array
 Индекс  Boolean
 button  Checkbox
 Классы, Конструкторы и Методы Java  Значения Цветов
 Оглавление  Куки Netscape
 date.htm  document
 event  FileUpload
 form.htm  Frame
 Function  Обработчики Событий
 Hidden  History
 Image  Оглавление
 java.htm  JavaArray
 JavaClass  JavaObject
 JavaPackage  Приложение A. Зарезервированные Слова
 Layer  JSException
 JSObject  Plugin
 link.htm  Location
 math.htm  MimeType
 navigator  netscape
 Number  Object
 Объекты, Методы и Свойства  Операции
 Option  Packages
 Приложения  Справочник по Классам LiveConnect
 Элементы Языка  Объекты. Справочник.
 Password  Plugin
 Об Этой Книге  Radio
 RegExp  Reset
 screen  Select
 Операторы  String
 Style  Submit
 sun.htm  text.htm
 Textarea  toc.htm
 Свойства и Функции Верхнего Уровня  Новые Возможности в Этой Версии
 window   


Разделы
Околокомпьютерная литература (375)
Программирование (102)
Программы (75)
ОС и Сети (49)
Интернет (29)
Аппаратное обеспечение (16)
Базы данных (6)

Содержание сайта (выборка)
Apache
Протоколы TCP/IP (принципы, протоколы и архитектура)

PHP, PELR, JSP
PHP
JavaServer Pages (JSP)

Базы данных
Основы mysql
СУБД INFORMIX
СУБД POSTGRES
Основы проектирования реляционных баз данных

HTML, javascript
Спецификация HTML 4.01
Каскадные Таблицы Стилей, Уровень 2
Клиентский JavaScript. Справочник.
JavaScript руководство пользователя
Серверный JavaScript 1.4. Руководство по Использованию.

Паскаль, C, C++, C#
GCC (примеры)
FAQ Валентинa Озеровa DELPHI
C





 
©  programming-lang.com  справочник программиста