Использование списка в анкете переводчика
Напишем сценарий обработки анкеты переводчика. Сведения о тех языках, которыми тот владеет, требуется задать с помощью списка.
Так как переводчик может владеть несколькими языками, то в теге <select> необходимо указать атрибут multiple, означающий, что из списка могут быть выбраны несколько элементов. Определим значение атрибута size равным четырем. Тогда будет отображен список прокрутки с четырьмя одновременно видимыми значениями и тремя выбранными, как на рис. 6.
|
|
|
Рис 6. Анкета переводчика |
Приведем описание тела HTML-кода документа (листинг 20а).
Листинг 20а. Анкета переводчика. Представление списком <BODY> <FORM name="form1"> <H4>Анкета переводчика</H4> Выберите язык, которым вы владеете в совершенстве<br> <select name="forma" size=4 multiple> <option value="русский">русский <option value="английский">английский <option value="французский">французский <option value="немецкий">немецкий <option value="китайский">китайский <option value="японский">японский </select><P> Вознаграждение:<input type="text" name="res" size=10><P> <input type="button" value="Определить" onClick="form1.res.value=testsel()"> <input type="reset" value="Отменить"> </FORM> </BODY>
В форме содержатся несколько элементов. Нас будет интересовать первый элемент, а в первом элементе те значения, которые выбраны. Определить, какие элементы выбраны, можно, если проанализировать следующие значения: ((document.forms["form1"].elements[0])[0]).selected ((document.forms["form1"].elements[0])[1]).selected ((document.forms["form1"].elements[0])[2]).selected ((document.forms["form1"].elements[0])[3]).selected ((document.forms["form1"].elements[0])[4]).selected ((document.forms["form1"].elements[0])[5]).selected
За знание каждого языка назначается определенная сумма. После анализа всех выбранных значений определяется вознаграждение. Для определения суммы вознаграждения следует щелкнуть по кнопке Определить. Реакция на это событие — запись в поле формы вычисленного значения (листинг 20б).
Листинг 20б. Данные об языках, представленные с помощью списка <HTML> <HEAD> <TITLE>Данные об языках, представленные с помощью списка</TITLE> <script language="JavaScript"> function testsel() { var d=document var s=0 if (((d.forms["form1"].elements[0])[0]).selected) s+=100 if (((d.forms["form1"].elements[0])[1]).selected) s+=200 if (((d.forms["form1"].elements[0])[2]).selected) s+=300 if (((d.forms["form1"].elements[0])[3]).selected) s+=400 if (((d.forms["form1"].elements[0])[4]).selected) s+=500 if (((d.forms["form1"].elements[0])[5]).selected) s+=600 return s } </script> </HEAD> <BODY> <FORM name="form1"> <H4>Анкета переводчика</H4> Выберите язык, которым вы владеете в совершенстве<br> <select name="forma" size=4 MULTIPLE> <option value="русский">русский <option value="английский">английский <option value="французский">французский <option value="немецкий">немецкий <option value="китайский">китайский <option value="японский">японский </select><P> Вознаграждение: <input type="text" name="res" size=10><P> <input type="button" value="Определить" onClick="form1.res.value=testsel()"> <input type="reset" value="Отменить"> </FORM> </BODY> </HTML>