Раскрывающиеся списки

Если элементов много, то представление их с помощью флажков или переключателей увеличивает размер формы. В этом случае варианты выбора могут быть представлены в окне браузера более компактно с помощью тега <select>, который имеет несколько атрибутов. Атрибут name является обязательным. Для того чтобы установить число одновременно видимых элементов, следует задать атрибут size=n. Когда n равно 1, то отображается ниспадающее меню или список выбора; при n>1 выводится список с n одновременно видимыми значениями. Если атрибут size не задан, то по умолчанию принимается значение равное 1. Указание атрибута multiple означает, что из меню или списка можно выбрать несколько элементов (для этого надо кликать мышкой при нажатой клавише Ctrl). Элементы меню задаются внутри тега <select> с помощью тега <option>. Общий вид тега таков:

<select name=myselect size=10 multiple> <option value="var1" selected>Первый вариант <option value="var2">Второй вариант <option value="var3">Третий вариант </select>

Атрибут selected означает, что данный элемент списка считается выбранным по умолчанию. Атрибут value содержит значение, которое передается, если данный элемент выбран из списка или меню.

Использование списка в задаче оформления заказа на витражи

Вернемся к задаче оформления заказа на витражи. В предыдущей версии форма витража задавалась с помощью переключателей. Теперь воспользуемся тегом <select>.

<BODY> <FORM name="form1"> Выберите форму витража<br>  <select name="vid" size=1>  <option value="0">прямоугольник  <option value="1">квадрат <option value="2">треугольник <option value="3">круг </select> <input type="button" value="Проверить" onClick="testsel()">  <input type="reset" value="Отменить">  </FORM>  </BODY>

Выбрать форму витража можно с помощью раскрывающегося списка. В приведенном выше коде форма содержит три элемента управления. Первый определяется тегом <select>, следующие два элемента представляют собой кнопки Проверить и Отменить.

Для того чтобы осуществить доступ к первому элементу формы (списку), следует воспользоваться одной из следующих конструкций document.form1.vid  document.form1.elements[0]  document.forms["form1"].elements[0]  document.forms[0].elements[0]

Список обладает свойствами length и name. В рассматриваемом примере значение document.form1.vid.length равно четырем, а значение document.form1.vid.name равно vid.

Свойства selected и value связаны с текущим выбором элемента из списка. Свойство selected возвращает значение true, если элемент выбран, и false — в противном случае. В рассматриваемом варианте кода если выбран первый элемент (прямоугольник), то значение ((document.forms["form1"].elements[0])[0].selected станет равным true. Для анализа следующих трех элементов списка следует определить значения:

document.forms["form1"].elements[0])[1].selected  document.forms["form1"].elements[0])[2].selected  document.forms["form1"].elements[0])[3].selected

Свойство value возвращает значение атрибута value, определенного в теге <option>. Значение ((d.forms["form1"].elements[0])[0]).value равно нулю. Свойство text возвращает текст, записанный после тега <option> в объекте select. Так значением ((d.forms["form1"].elements[0])[0]).text является строковый литерал "прямоугольник".

Функция testsel() играет роль тестиреумой программы и проверяет, правильно ли выбираются атрибуты. Полностью документ со сценарием будет выглядеть так, как представлено в листинге 19а.

Листинг 19а. Данные, представленные с помощью тега select <HTML>  <HEAD> <TITLE>Данные, представленные с помощью тега select</TITLE>  <script ="JavaScript">  function testsel()  { var d=document  var r="Выбранная форма: "  if (((d.forms["form1"].elements[0])[0]).selected) r=r+((d.forms["form1"].elements[0]) [0]).text+" "  else if (((d.forms["form1"].elements[0])[1]).selected) r=r+((d.forms["form1"].elements[0])[1]).text+" "  else if (((d.forms["form1"].elements[0])[2]).selected) r=r+((d.forms["form1"].elements[0])[2]).text+" "  else if (((d.forms["form1"].elements[0])[3]).selected) r=r+((d.forms["form1"].elements[0])[3]).text+" "  form1.res.value=r } </script>  </HEAD>  <BODY> <FORM name="form1"> Выберите форму витража<br>  <select name="vid" size=1>  <option value="0">прямоугольник <option value="1">квадрат <option value="2">треугольник <option value="3">круг  </select> <input type="button" value="Проверить" onClick="testsel()">  <input type="text" size=50 name="res"> <input type="reset" value="Отменить">  </FORM>  </BODY>  </HTML>

Однако, если элементов списка достаточно много, то пользоваться условным оператором, для определения, какой из элементов выбран, не слишком удобно. Гораздо эффективнее воспользоваться свойством selectedIndex объекта select. В этом случае получение значения выбранного элемента можно сделать в два этапа. Сначала определяется значение свойства selectedIndex (т.е. номер выбранного элемента), а затем из массива options[] значений элементов списка получаем значение свойства value для выбранного элемента.

В качестве примера — другой вариант обработки формы в выборе вида витража (листинг 19б.)

Листинг 19б. Применение свойства selectedIndex

<HTML> <HEAD> <TITLE>Применение свойства selectedIndex</TITLE> <script ="JavaScript"> function testsel() { var d=document var r="Выбранная форма: " ind=d.forms["form1"].vid.selectedIndex r=r+d.forms["form1"].vid.options[ind].value+" " form1.res.value=r } </script> </HEAD> <BODY> <FORM name="form1"> Выберите форму витража<br> <select name="vid" size=1> <option value="прямоугольник">прямоугольник <option value="квадрат">квадрат <option value="треугольник">треугольник <option value="круг">круг </select> <p><input type="button" value="Проверить" onClick="testsel()"> <input type="text" size=50 name="res"> <p><input type="reset" value="Отменить"> </FORM> </BODY> </HTML>

Здесь в раскрывающемся списке с именем vid значения элементов <option> заданы сразу в атрибутах value ("прямоугольник", "квадрат" и т.д.). Затем, в функции testsel() в переменную ind заносится номер того элемента <option>, который был выбран, а в конструкции document.forms["form1"].vid.options[ind].value для элемента массива options[ind] с номером ind получаем значение атрибута value.