[Содержание] [Предыдущая] [Следующая] [Индекс]

Select

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

Объект client-side
Реализовано в Navigator 2.0
Navigator 3.0: добавлено свойство type; добавлена способность добавлять и удалять параметры.
Navigator 4.0: добавлен метод handleEvent.

Создание

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

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

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

Описание

 Следующий рисунок показывает форму, содержащую два списка выбора. Пользователь может выбрать один элемент из списка слева и может выбрать несколько элементов из списка справа:

Объект Select это элемент формы и должен быть определен внутри тэга FORM.

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

form
 Определяет форму, содержащую список выбора. 
length
 Отражает число параметров в списке выбора. 
name
 Отражает аттрибут NAME. 
options
 Отражает тэги OPTION. 
selectedIndex
 Отражает индекс выбранной опции (или первой выбранной опции, если выбрано несколько параметров). 
type
 Определяет, что объект представляет список выбора и может ли он иметь один или более выбранных параметров.

Резюме Методов

blur
 Удаляет фокус из списка выбора. 
focus
 Дает фокус списку выбора. 
handleEvent
 Вызывает обработчик для указанного события.

Примеры

Пример 1. Следующий пример показывает два списка выбора. В первом списке, пользователь может выбрать только один элемент; во втором списке, пользователь может выбрать несколько элементов.

Выберите тип музыки для Вашего бесплатного CD:
<SELECT NAME="music_type_single">
   <OPTION SELECTED> R&B
   <OPTION> Джаз
   <OPTION> Blues
   <OPTION> New Age
</SELECT>
<P>Выберите типы музыки для Ваших бесплатных CD:
<BR><SELECT NAME="music_type_multi" MULTIPLE>
   <OPTION SELECTED> R&B
   <OPTION> Джаз
   <OPTION> Blues
   <OPTION> New Age
</SELECT>
Пример 2. Следующий пример показывает два списка выбора, которые позволяют пользователю выбирать месяц и день. Эти списки выбора инициализируются текущей датой. Пользователь может изменять месяц и день, используя списки выбора или выбирая предварительно установленные даты из "радио" кнопок. Текстовые поля в форме отображают значения свойств объекта Select и указывают, равна ли выбранная дата Cinco de Mayo.

<HTML>
<HEAD>
<TITLE>Select object example</TITLE>
</HEAD>
<BODY>
<SCRIPT>
var today = new Date()
//---------------
function updatePropertyDisplay(monthObj,dayObj) {
   // Получаем строки даты
   var monthInteger, dayInteger, monthString, dayString
   monthInteger=monthObj.selectedIndex
   dayInteger=dayObj.selectedIndex
   monthString=monthObj.options[monthInteger].text
   dayString=dayObj.options[dayInteger].text
   // Отображаем значения свойств
   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
   // Равно Cinco de Mayo?
   if (monthObj.options[4].selected && dayObj.options[4].selected)
      document.selectForm.textCinco.value="Да!"
   else
      document.selectForm.textCinco.value="Нет"
}
</SCRIPT>
<!--------------->
<FORM NAME="selectForm">
<P><B>Выберите месяц и день:</B> 
Месяц: <SELECT NAME="monthSelection"
   onChange="updatePropertyDisplay(this,document.selectForm.daySelection)">
   <OPTION> Январь <OPTION> Февраль <OPTION> Март
   <OPTION> Апрель <OPTION> Май <OPTION> Июнь
   <OPTION> Июль <OPTION> Август <OPTION> Сентябрь
   <OPTION> Октябрь <OPTION> Ноябрь <OPTION> Декабрь
</SELECT>
День: <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>Установить дату: </B>
<INPUT TYPE="radio" NAME="dateChoice"
   onClick="
      monthSelection.selectedIndex=0;
      daySelection.selectedIndex=0;
      updatePropertyDisplay
         document.selectForm.monthSelection,document.selectForm.daySelection)">
   День Нового Года
<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)">
   Летнее Солнцестояние
<P><B>Значения свойств:</B>
<BR>Выбранная дата: <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>Является ли она 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("Красный", "Синий", "Желтый", "Зеленый")
   var option0 = new Option("Красный", "color_red")
   var option1 = new Option("Синий", "color_blue")
   var option2 = new Option("Желтый", "color_yellow")
   var option3 = new Option("Зеленый", "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>Конструктор Option() для Select</H3>
<FORM>
<SELECT NAME="selectTest"></SELECT><P>
<INPUT TYPE="button" VALUE="Заполнить Список Выбора" onClick="populate(this.form)">
<P>
</FORM>
 
<HR>
<H3>Конструктор Option() для многострочного Select</H3>
<FORM>
<SELECT NAME="selectTest" multiple></SELECT><P>
<INPUT TYPE="button" VALUE="Заполнить Список Выбора" onClick="populate(this.form)">
</FORM>
 Пример 4. Удаляет опцию. Следующая функция удаляет опцию из объекта Select.

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

Смотрите также

 Form, Radio

Свойства

form

 Объектная ссылка, определяющая форму, содержащую список выбора.

Свойство объекта Select
Только для чтения
Реализовано в Navigator 2.0

Описание

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

Смотрите также

Form

length

Число параметров в списке выбора.

Свойство объекта Select
Только для чтения
Реализовано в Navigator 2.0

name

Строка, определяющая имя списка выбора.

Свойство объекта Select
Реализовано в Navigator 2.0

Защита

Navigator 3.0: Это свойство заражено по умолчанию. Для информации о заражении данных, смотрите "Защита JavaScript".

Описание

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

Если несколько объектов в одной и той же форме имеют одинаковый аттрибут NAME, автоматически создается массив данного имени. Каждый элемент в массиве представляет индивидуальный объект Select. Элементы индексируются в исходном порядке, начиная с 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
Только для чтения
Реализовано в Navigator 2.0

Описание

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

Чтобы получить число параметров в списке выбора, Вы можете использовать или Select.length или свойство length массива options. Например, Вы можете получить число параметров в списке выбора musicStyle любым из этих выражений:

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

jeans = new Option("Синие Джинсы", "jeans", false, false);
myList.options[myList.length] = jeans;
Чтобы удалить опцию из объекта Select, Вы устанавливаете соответствующий индекс массива options в null. Удаление опции сжимает массив параметров. Например, предположим, что myList имеет 5 элементов, значение четвертого элемента равно "foo", и Вы выполняете это выражение:

myList.options[1] = null
Теперь, myList имеет 4 элемента и значение третьего элемента равно "foo".

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

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

musicStyle.selectedIndex
musicStyle.options.selectedIndex
Для подробной информации об этом свойстве, смотрите Select.selectedIndex.

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

document.write("Вы выбрали следующие опции:\n")
for (var i = 0; i < mySelect.options.length; i++) {
   if (mySelect.options[i].selected)
      document.write(" mySelect.options[i].text\n")
}
Вообще, чтобы работать с индивидуальными параметрами в списке выбора, Вы работаете с соответствующим объектом Option.

selectedIndex

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

Свойство объекта Select
Реализовано в Navigator 2.0

Защита

Navigator 3.0: Это свойство заражено по умолчанию. Для информации о заражении данных, смотрите "Защита 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> Джаз
   <OPTION> Blues
   <OPTION> New Age
</SELECT>

Смотрите также

 Option.defaultSelected, Option.selected

type

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

Свойство объекта Select
Только для чтения
Реализовано в Navigator 3.0

Примеры

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

for (var i = 0; i < document.form1.elements.length; i++) {
   document.writeln("<BR>тип " + document.form1.elements[i].type)
}

Методы

blur

 Удаляет фокус из списка выбора.

Метод объекта Select
Реализовано в Navigator 2.0

Синтаксис

blur()

Параметры

 Нет.

Смотрите также

Select.focus

focus

Передает управление списку выбора и передает ему фокус.

Метод объекта Select
Реализовано в Navigator 2.0

Синтаксис

focus()

Параметры

 Нет.

Описание

Используйте метод focus, чтобы перейти к списку выбора и дать ему фокус. Пользователь может затем выбирать из списка.

Смотрите также

Select.blur

handleEvent

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

Метод объекта Select
Реализовано в Navigator 4.0

Синтаксис

handleEvent(event)

Параметры

 

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

[Содержание] [Предыдущая] [Следующая] [Индекс]

Последняя Модификация: 10/31/97 12:32:20

Права © 1997 Netscape Communications Corporation


Все мессаги сюда:yanich@inbox.ru
Hosted by uCoz