Список выбора на HTML-форме. Пользователь может выбрать один или более элементов из списка selection в зависимости от того, как список создан.
JavaScript 1.1: добавлено свойство |
HTML-тэгом SELECT. Для данной формы машина выполнения JavaScript
создаёт соответствующие объекты Select для каждого списка selection
и помещает эти объекты в массив elements
соответствующего объекта Form. Вы
получаете доступ к объекту Select по индексу в этом массиве. Можно
индексировать массив по числам или, если имеются, по значениям атрибутов NAME.
Машина выполнения создаёт также объекты Option
для каждого тэга OPTION внутри тэга SELECT.
На рисунке показана форма с двумя списками selection. Пользователь может выбрать один элемент из списка слева и несколько элементов в списке справа:
Объект Select это элемент формы, он обязан быть определён в тэге FORM.
| Свойство |
Описание
|
|
|
| Отражает индекс выбранной опции (или первой выбранной опции, если выбрано несколько опций). Специфицирует, что представляемый им объект это список selection и может ли он иметь одну или более выбранных опций. |
|---|
| Метод |
Описание |
|---|
Кроме того, этот объект наследует методы 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Убирает фокус со списка selection.
blur()
Select.focusПереходит к списку selection и передаёт ему фокус.
focus()
Используйте метод focus для перехода к списку selection и передачи ему фокуса.
Select.blurСсылка объекта, специфицирующая форму, содержащую список selection.
Каждый элемент формы имеет свойство form, которое является ссылкой
на родительскую форму элемента. Это свойство используется в основном в
обработчиках событий, где может понадобиться обратиться к другому элементу текущей формы.
FormВызывает обработчик для специфицированного события.
handleEvent(event)
event |
Количество опций в списке selection.
Это свойство имеет то же значение, что и Option.length.
Строка, специфицирующая имя списка selection.
JavaScript 1.1. Это свойство разрушено по умолчанию. О разрушении данных см. книгу Клиентский
Свойство 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>")
}
}
Массив, соответствующий опциям Select-объекта в порядке их появления в исходном коде.
Вы можете обратиться к опции объекта 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-объектом.
Целое число, специфицирующее индекс выбранной опции в объекте Select.
JavaScript 1.1. Это свойство разрушено по умолчанию. О разрушении данных см. книгу Клиентский
Опции в объекте 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Для всех Select-объектов, созданных с ключевым словом MULTIPLE,
значение свойства type будет "select-multiple". Для Select-объектов,
созданных без этого ключевого слова, значение свойства type будет "select-one".
Это свойство специфицирует тип элемента формы.
Здесь записывается значение свойства 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
