Коллекция 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 (html, txt)

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

Восстановление альтернатив мы поместили в обработчик события 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.