Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 92 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

onClick="document.f0.s0.options[document.f0.s0.length-1]=null;">
<INPUT TYPE=reset VALUE=Reset>
</FORM>
В данном примере при загрузке страницы с сервера определены три альтернативы. Они появляются, если выбрать поле
Select. После нажатия на кнопку удаления последнего варианта ("Delete last option") остаются только две альтер-
нативы. Если еще раз нажать на кнопку удаления альтернативы, останется только одна альтернатива и т.д. В конечном счете,
вариантов может не остаться вообще, т.е. пользователь лишится возможности выбора. Кнопка Reset показывает, что альтер-
нативы утеряны бесследно, так как после нажатия на эту кнопку содержание поля Select не восстанавливается.
Теперь, используя конструктор Option, сделаем процесс обратимым:
function def_f1()
{
document.f1.s1.options[0] = new Option("вариант Один","",true,true);
document.f1.s1.options[1] = new Option("вариант Два");
document.f1.s1.options[2] = new Option("вариант Три");
return false;
}
...
<FORM NAME=f1 onReset="def_f1();">
<SELECT NAME=s1>
<OPTION>вариант Один
<OPTION>вариант Два
<OPTION>вариант Три
</SELECT>
<INPUT TYPE=button VALUE="Удалить последний вариант"
onClick="document.f1.s1.options[document.f1.s1.length-1]=null;">
<INPUT TYPE=reset VALUE=Reset>
</FORM>
В данном случае мы обрабатываем событие Reset (тег Form). При этом создаем новые объекты типа Option и подчи-
няем их объекту Select. При этом первый элемент массива должен быть выбран по умолчанию, чтобы смоделировать по-
ведение при начальной загрузке страницы.
В HTML-формах нельзя реализовать подменю. JavaScript позволяет обойти это ограничение и выполнить замену путем
программирования поля Select.
В примерах перепрограммирования options[] активно используется свойство объекта Select length. Оно опре-
деляет количество альтернатив, заданных для поля выбора. При помощи этого свойства можно удалять и восстанавливать
списки.
Определим посредством этого свойства число вариантов в предыдущем примере:
<FORM NAME=f3>
Число вариантов: <INPUT NAME=i0 SIZE=1 MAXLENGTH=1 onFocus="out();">
</FORM>
<SCRIPT>
document.f3.i0.value=document.f1.s1.length;
</SCRIPT>
Обратите внимание на тег SCRIPT. Он расположен вслед за формой. Если его ввести раньше, то поля формы будут не
определены, и в результате мы получим сообщение об ошибке.
Свойство объекта Select, которое возвращает значение выбранного варианта, обозначается как selectedIndex.
<FORM>
Вариант:
<SELECT NAME=s0 onChange = "form.elements[1].value = selectedIndex;">
<OPTION>Один
<OPTION>Два
</SELECT>
Выбрали индекс:
<INPUT SIZE=1 maxlength=1>
</FORM>
Посмотрите, как мы обращаемся к элементам текущей формы. Во-первых, мы используем имя Form. Оно указывает на
объект Form, к которому принадлежит поле. Во-вторых, мы ссылаемся на второй элемент формы. На данный момент он не
определен, но событие произойдет только тогда, когда мы будем выбирать вариант. К этому моменту поле уже будет опре-
делено. В-третьих, мы ссылаемся на selectedIndex, не указывая полного имени формы. В данном контексте он относится к
текущей форме.
Событие change наступает в тот момент, когда изменяется значение выбранного индекса в объекте Select. С измене-
нием этого индекса в полях выбора единственного варианта на данной странице мы сталкивались неоднократно
(selectedIndex и options[]). Данное событие обрабатывается JavaScript-программой, которая указывается в атрибуте
onChange тега Select. В этом контексте интересно посмотреть, что происходит, когда мы имеем дело с multiple тегом
Select:

Страницы