Список выбора на 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.
Вызывает обработчик для специфицированного события.
Кроме того, этот объект наследует методы 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 } }
Каждый элемент формы имеет свойство form, которое является ссылкой
на родительскую форму элемента. Это свойство используется в основном в
обработчиках событий, где может понадобиться обратиться к другому элементу текущей формы.
Свойство 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 с помощью массива 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, Вы можете использовать следующий код:
Для удаления опции из Select-объекта Вы устанавливаете
соответствующий индекс массива options в null. Удаление опции
сжимает массив опций. Например, предположим, что myList имеет 5
элементов, значение четвёртого элемента - "foo", и Вы выполняете следующий оператор:
myList.options[1] = null
Теперь myList содержит 4 элемента, а значение третьего элемента - "foo".
После удаления опции Вы обязаны обновить документ, используя history.go(0).
Этот оператор обязан быть последним. Когда документ перезагружается, значения
переменных теряются, если они не сохранены в куках или в значениях элементов формы.
Вы можете определить, какая опция списка selection выбрана в данный момент,
используя свойство selectedIndex массива options или
сам объект Select. То есть, следующие выражения возвращают одинаковые значения:
Для объектов 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 индексируются в том порядке, в котором они
определены, начиная с индекса 0. Вы можете установить свойство selectedIndex
в любое время. Вид объекта Select обновляется сразу после установки свойства selectedIndex.
Если ни одна опция не выбрана, selectedIndex имеет значение -1.
Вообще свойство selectedIndex больше подходит для Select-объектов,
которые создаются без атрибута MULTIPLE. Если Вы вычисляете selectedIndex,
когда выбраны несколько опций, свойство selectedIndex специфицирует
индекс только первой опции. Установка selectedIndex очищает любые
другие выбранные опции в объекте Select.
Свойство Option.selected больше
подходит для работы с теми объектами Select, которые создаются с
атрибутом MULTIPLE. С помощью свойства Option.selected
Вы можете вычислять каждую опцию массива options
для определения множественного выбора, а также можете выбрать отдельные опции без очистки статуса выбора других опций.
Пример
Здесь функция getSelectedIndex возвращает индекс выбора в объекте musicTypeSelect:
function getSelectedIndex() { return document.musicForm.musicType.selectedIndex }
Предполагается, что Select-объект похож на следующий:
<SELECT NAME="musicType"> <OPTION SELECTED> R&B <OPTION> Jazz <OPTION> Blues <OPTION> New Age </SELECT>
Для всех Select-объектов, созданных с ключевым словом MULTIPLE,
значение свойства type будет "select-multiple". Для Select-объектов,
созданных без этого ключевого слова, значение свойства type будет "select-one".
Это свойство специфицирует тип элемента формы.
