Создание объектов 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, но и удалять уже созданные браузером объекты:

Пример 3. Удаление вариантов из SELECT

<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>

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

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

Пример 4. Удаление и добавление вариантов из SELECT

<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>

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