Изменение элементов списка выбора на основании введенных посетителем данных
Ранее в этой главе мы говорили о том, что список выбора представляет собой меню, из которого посетитель может выбрать один или несколько элементов в зависимости от того, присутствует ли атрибут multiple в дескрипторе <select>списка выбора. (Если атрибут multiple указан, Web-браузер даст посетителю возможность выбирать из меню несколько элементов.) Несмотря на то, что вы должны указать возможность или невозможность выбора в списке несколькихэлементов в описании списка выбора, содержащиеся в списке элементы можно менять в любое время, даже после того как браузер визуализировал этот список.
Предположим, например, что имеется форма, показанная на рис. 3.11, которая предлагает посетителю ввести имена членов его семьи, а затем выбрать имя наиболее пожилого из них.
ПРАКТИКУМ
В этом примере меню выбора (показанное на рис. 3.11 над кнопками Submit и Reset) содержит только один элемент "— Имена членов семьи —" ("— Family Member Names —"). Чтобы добавить в список выбора новые элементы(т.е. имена членов семьи), запрограммируем кнопку для вызова JavaScript-функции, которая будет вставлять в список новый элемент:
<input type="button" value="Добавить имя в список"onClick="addToList(ExampleForm) "></p>
Далее определим функцию addToList(), которую Web-браузер будет вызывать при нажатии посетителем кнопки "Добавить имя в список". Для этого вставим следующий JavaScript-код после дескриптора <body> в рамках HTML-кода Web-страницы. (Имя функции и значение атрибута value кнопки будет зависеть от функции, которая должна выполняться в результате нажатия кнопки.)
<html<body><head><script language="JavaScript">function addToList(Form){var NextItem=Form.OldestFamilyMember.length;var NewName=Form.MemberName.value;//Убедиться, что поле ввода имени не оставлено пустымif (NewName==""){alert("Пожалуйста, введите имя!");return;}//Добавить в список выбора новую опциюif (Form.OldestFamilyMember.options[0].value=="PromptText") NextItem=0;//Запятая (,) в строке '", ' , добавляемой к параметру NewName//в конструкторе Option(), вставляет запятую-разделитель между//элементами списка, заключенными в кавычкиForm.OldestFamilyMember.options[NextItem]=new Option(NewName, '"'+NewName+'",',0,0);//Очистить содержимое поля ввода имениForm.MemberName.value ="";Form.MemberName.focus();return;}// --></script>
(Рис. 3.11. Форма, в которой данные, введенные в текстовое поле, изменяют содержимое списка выбора. См. стр. 152/151 в оригинале книги)
После проверки ввода пользователем хоть какой-нибудь информации в текстовое поле имени члена семьи функция addToList() добавляет новый элемент в список выбора с использованием следующего синтаксиса:
ИмяСпискаВыбора. options[ИндексНовогоЭлемента]=new Option(ТекстОпции, ЗначениеОпции, SelectedByDefault,SelectedWhenAdded) ;
В нашем примере параметры SelectedByDefault и SelectedWhenAdded в вызове new Option имеют значения 0. Это значит, что вновь добавленные новые элементы списка по умолчанию являются невыбранными, и, во время добавления нового элемента, Web-браузер не выбирает его автоматически. Если же требуется, чтобы Web-браузер выбирал каждый элемент после его добавления пользователем, установите значение параметра SelectedWhenAdded равным 1.