Российский государственный гуманитарный университет
Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 22321 / 3958 | Оценка: 4.00 / 3.90 | Длительность: 10:03:00
Лекция 5:

Программируем формы

< Лекция 4 || Лекция 5: 12345 || Лекция 6 >

Списки вариантов (объекты Select и Option)

Одним из важных элементов интерфейса пользователя являются списки вариантов. В HTML-формах для их реализации используется контейнер <SELECT>, который вмещает в себя контейнеры <OPTION>. При этом список может "выпадать" либо прокручиваться внутри окна. В зависимости от наличия атрибута MULTIPLE у контейнера <SELECT> список может быть либо с возможностью выбора только одного варианта, либо нескольких вариантов.

С каждым контейнером <SELECT> ассоциирован объект класса Select, а с каждым дочерним контейнером <OPTION> - объект класса Option, являющийся свойством данного объекта класса Select. Кроме того, свойством объекта класса Select является также коллекция options[], объединяющая все его дочерние объекты Option. Перечислим основные свойства, методы и события, характеризующие эти объекты.

Объект Select
Свойства Методы Обработчики событий
options[]
size
length
multiple
selectedIndex
focus()
blur()

add()
remove()
onBlur 
onChange 
onFocus
Объект Option
Свойства Методы События
defaultSelected 
selected
index
text
value
нет нет

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

Создание объектов Option

Объект класса Option интересен тем, что в отличие от многих других встроенных в DOM объектов JavaScript, имеет конструктор. Это означает, что программист может сам создать объект класса Option:

opt = new Option([ text, [ value, [ defaultSelected, [ selected ]]]]);

где аргументы соответствуют свойствам обычных объектов класса Option:

  • text - строка текста, которая размещается в контейнере <OPTION> (например: <OPTION> текст </OPTION> );
  • value - значение, которое передается серверу при выборе альтернативы, связанной с объектом Option ;
  • defaultSelected - выбрана ли эта альтернатива по умолчанию ( true / false );
  • selected - альтернатива была выбрана пользователем ( true / false ).

На первый взгляд не очень понятно, для чего может понадобиться программисту такой объект, ведь создать объект класса Select нельзя и, следовательно, нельзя приписать ему новый объект Option. Все объясняется, когда речь заходит об изменении списка альтернатив у имеющегося в документе объекта Select. Делать это можно, при этом изменение списка альтернатив Select не приводит к переформатированию документа. Изменение списка альтернатив позволяет решить проблему создания вложенных меню, которых нет в HTML-формах, путем программирования обычных меню ( options[] ).

При программировании альтернатив следует обратить внимание на то, что у объектов класса Option нет свойства name, в виду того, что у контейнера <OPTION> нет атрибута NAME. Таким образом, к встроенным в документ объектам класса Option можно обращаться только как к элементам коллекции options[].

Коллекция options[]

Встроенный массив ( коллекция ) options[] - это одно из свойств объекта Select. Элементы этого массива являются полноценными объектами класса Option. Они создаются по мере загрузки страницы браузером. Количество объектов Option, содержащихся в объекте document.f.s класса Select, можно узнать с помощью стандартного свойства массива: document.f.s.options.length. Кроме того, у самого объекта Select есть такое же свойство: document.f.s.length - оно полностью идентично предыдущему.

Программист имеет возможность не только создавать новые объекты Option, но и удалять уже созданные браузером объекты:

<FORM>
<SELECT NAME=s>
<OPTION>Первый вариант</OPTION>
<OPTION>Второй вариант</OPTION>
<OPTION>Третий вариант</OPTION>
</SELECT>
<INPUT TYPE=button VALUE="Удалить последний вариант"
       onClick="form.s.options[form.s.length-1]=null;">
<INPUT TYPE=reset VALUE="Сбросить">
</FORM>
5.3. Удаление вариантов из SELECT

В данном примере при загрузке страницы с сервера у нас имеются три альтернативы. Их можно просматривать как ниспадающий список вариантов. После нажатия на кнопку " Удалить последний вариант " в форме остается только две альтернативы. Если еще раз нажать на эту кнопку, останется только одна альтернатива. В конечном счете, вариантов не останется вовсе, т.е. пользователь лишится возможности выбора. При нажатии кнопки сброса ( reset ) варианты не восстанавливаются - альтернативы утеряны бесследно.

Теперь, используя конструктор Option, сделаем процесс обратимым:

<SCRIPT>
function RestoreOptions()
{
document.f.s.options[0] = new Option('Вариант один','',true,true);
document.f.s.options[1] = new Option('Вариант два');
document.f.s.options[2] = new Option('Вариант три');
return false;
}
</SCRIPT>
<FORM NAME=f onReset="RestoreOptions();">
<SELECT NAME=s>
<OPTION>Первый вариант</OPTION>
<OPTION>Второй вариант</OPTION>
<OPTION>Третий вариант</OPTION>
</SELECT>
<INPUT TYPE=button VALUE="Удалить последний вариант"
      onClick="form.s.options[form.s.length-1]=null;">
<INPUT TYPE=reset VALUE=Reset>
</FORM>
5.4. Удаление и добавление вариантов из SELECT

Восстановление альтернатив мы поместили в обработчик события onReset контейнера FORM. Создаваемые объекты класса Option мы присваиваем объекту document.f.s класса Select. При этом первая альтернатива должна быть выбранной по умолчанию (аргументу defaultSelected задано значение true ), чтобы смоделировать поведение при начальной загрузке страницы.

Свойства text и value объекта Option

Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе. В HTML-коде он расположен между тэгами <OPTION> и </OPTION>. Свойство value содержит значение атрибута VALUE тэга <OPTION>. Например, пусть один из вариантов в списке был описан как:

<OPTION VALUE="n1">Вариант первый</OPTION>

Тогда значение свойства text у соответствующего объекта будет равно " Вариант первый ", а значение свойства value равно " n1 ".

Возникает вопрос, зачем нужны два свойства? Дело в том, что на сервер передается значение value выбранного варианта. В случае же, когда атрибут VALUE у контейнера <OPTION> отсутствует, на сервер передается значение text.

Свойства selected и selectedIndex

Свойство selectedIndex объекта Select возвращает номер выбранного варианта (нумерация начинается с нуля).

<FORM> Вариант: 
<SELECT onChange="form.e.value=selectedIndex;">
<OPTION>Один</OPTION>
<OPTION>Два</OPTION>
</SELECT>
Выбрали индекс: <INPUT NAME=e>
</FORM>

Обратите внимание, что в обработчике события onChange мы ссылаемся на второй элемент формы. На данный момент он не определен, но событие произойдет только тогда, когда мы будем выбирать вариант - к этому моменту поле уже будет определено.

Если список вариантов задан как <SELECT MULTIPLE>, т.е. с возможностью выбора нескольких опций одновременно, то свойство selectedIndex возвратит индекс первой выбранной опции. На этот случай имеется альтернатива: свойство selected у каждого объекта Option. Оно равно true, если данная опция выбрана, и false в противном случае. Пример будет приведен ниже.

Обработчик события onChange объекта Select

Событие Change наступает в тот момент, когда пользователь меняет свой выбор вариантов. Если поле является полем выбора единственного варианта, то все просто - см. предыдущий пример. Посмотрим, что происходит, когда мы имеем дело с полем выбора множественных вариантов:

<FORM>
Фрукты: <SELECT MULTIPLE
onChange="form.e.value='';
          for(i=0; i<length; i++)
          if(options[i].selected)
          form.e.value += options[i].text+', ';">

<OPTION>яблоко</OPTION>
<OPTION>банан</OPTION>
<OPTION>киви</OPTION>
<OPTION>персик</OPTION>
</SELECT><BR>
Выбраны позиции: <INPUT READONLY SIZE=70 NAME=e>
</FORM>
5.5. Обработчик onChange при выборе множественных вариантов

Обратите внимание на то, что событие Change происходит тогда, когда пользователь выбирает или отменяет какой-либо вариант. Исключение составляет тот случай, когда варианты при выборе последовательно отмечаются (нажатие кнопки мыши на одном элементе, ведение мыши до конечного элемента, отпускание кнопки мыши). В этом случае событие происходит в тот момент, когда пользователь отпускает кнопку мыши, и все отмеченные альтернативы становятся выбранными.

< Лекция 4 || Лекция 5: 12345 || Лекция 6 >
Дамир Кантюков
Дамир Кантюков

Изучаю курс введение в JavaScript. 4 уроке есть код, где метод присвоен переменной, почему у меня не работает, браузер гугл:

<HTML><HEAD> <SCRIPT> wid = window.open('','','width=750,height=100,status=yes'); wid.document.open(); R = wid.document.write; R('<HTML><HEAD><SCRIPT>var t;<\/SCRIPT></HEAD>'); R('<BODY><H1>Новое окно</H1></BODY></HTML>'); wid.document.close(); </SCRIPT> </HEAD> <BODY> <A HREF="javascript: wid.t=window.prompt('Новое состояние:',''); wid.document.write(wid.t); wid.focus(); void(0);" >Изменим значение переменной t в новом окне</A> </BODY></HTML>

Нураалы Батырбеков
Нураалы Батырбеков
Алексей Новопольцев
Алексей Новопольцев
Россия, Саратов, СГТУ, 1996
Алексей Прилипко
Алексей Прилипко
Россия, Москва