Оглавление

18.8. Список с возможными значениями

Возможность добавления нового пункта. Применение списков вместо гиперссылок

 

Свойства объекта списка:
□  disabled — запрет доступа: если задано значение true, то список является неактивным (отображается серым цветом);
□  form — ссылка на форму, в которой находится элемент;
□  length — количество пунктов в списке (доступно и для записи);
□  multiple — разрешение множественного выделения: true, если из списка можно выбрать сразу несколько элементов одновременно;
□  name — имя элемента;
□  options — ссылка на коллекцию пунктов в списке;
□  seiectedindex — номер выбранного пункта (нумерация начинается с нуля);
□  size — число одновременно видимых элементов списка;
□  type —тип элемента формы (select-multiple или select-one);
□  value — значение пункта, выбранного в списке.

 

Свойства пункта списка:

□  defauitseiected — пункт списка, выбранный изначально;
□  index — номер пункта в списке;
□  selected — признак выделения: true, если пункт выбран в списке;
□  disabled — если задано значение true, то пункт списка является неактивным (отображается серым цветом). Свойство поддерживается Web-браузером Internet Explorer, начиная с версии 8.0;
□  text — текст пункта списка;
□  value — значение пункта, выбранного в списке.

 

Методы:
□  blur() убирает фокус ввода с текущего элемента формы;
□  focus() помещает фокус на текущий элемент формы.

 

События:
□  onblur наступает при потере фокуса элементом формы;
□  onchange происходит после выбора нового пункта списка;
□  onfocus наступает при получении фокуса ввода элементом формы.

 

Кроме перечисленных событий можно использовать стандартные события мыши и клавиатуры.

 

Рассмотрим пример работы со списками. Документ, приведенный в листинге 69, демонстрирует следующие возможности:
□   добавление нового пункта списка. При заполнении первого поля и нажатии клавиши <Enter> фокус ввода перемещается во второе поле. При заполнении второго поля и нажатии клавиши <Enter> введенные значения добавляются в список. Вместо клавиши <Enter> можно воспользоваться кнопкой Добавить;
□   получение всех выбранных значений из списка с возможностью множественного выбора;
□   применение взаимосвязанных списков и получение значения выбранного пункта. При выборе элемента в первом списке загружаются соответствующие элементы во второй список. При выборе элемента во втором списке выводится сообщение со значением выбранного пункта;
□    применение списков вместо гиперссылок. При выборе элемента списка загружается Web-страница, находящаяся по указанному в параметре value URL-адресу.

 

Листинг 69. Обработка списков

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Пример обработки списков</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<form action="test.php" method="GET" name="frm" id="frm">

<!-- Добавление пункта в список  -->

<script type="text/javascript">
<!--
function f_click() {
   var pole1 = document.getElementById("pole1");
   var pole2 = document.getElementById("pole2");
   var select1 = document.getElementById("select1");
   if (pole1.value != "" && pole2.value != "") {
      var i = select1.length++;
      select1.options[i].text = pole1.value;
      select1.options[i].value = pole2.value;
      pole1.value = "";
      pole2.value = "";
      pole1.focus();
   }
   else {
      window.alert("Поле не заполнено!");
      pole1.focus();
   }
}
function f_press1(e) {
   e = e || window.event;
   if (e.keyCode==13) {
      document.getElementById("pole2").focus();
      if (e.preventDefault) e.preventDefault();
      else e.returnValue = false;
   }
}
function f_press2(e) {
   e = e || window.event;
   if (e.keyCode==13) {
      f_click();
      if (e.preventDefault) e.preventDefault();
      else e.returnValue = false;
   }
}
//-->
</script>
<div>
<b>Добавление пункта в список:</b><br><br>
Текст пункта:<br>
<input type="text" name="pole1" id="pole1" onkeypress="f_press1(event);">
<br>Значение пункта:<br>
<input type="text" name="pole2" id="pole2" onkeypress="f_press2(event);">
<br><select name="select1" id="select1">
</select><br>
<input type="button" value="Добавить" onclick="f_click();"><br><br>

<!-- Список со множественным выбором  -->

<script type="text/javascript">
<!--
function f_multi() {
   var msg = "";
   var select2 = document.getElementById("select2");
   var count = select2.length;
   for (var i=0; i<count; i++) {
      if (select2.options[i].selected) {
         msg += select2.options[i].value + " - ";
         msg += select2.options[i].text + "\n";
      }
   }
   window.alert(msg);
}
//-->
</script>
<b>Список со множественным выбором:</b><br><br>
<select name="select2" id="select2" size="5" multiple>
<option value="1" selected>Элемент1</option>
<option value="2">Элемент2</option>
<option value="3">Элемент3</option>
<option value="4">Элемент4</option>
<option value="5">Элемент5</option>
<option value="6">Элемент6</option>
</select><br>
<input type="button" value="Значения списка" 
onclick="f_multi();"><br><br>

<!-- Взаимосвязанные списки  -->

<script type="text/javascript">
<!--
var Mass = [];
Mass[1] = [ "Тема1 Элемент1", "Тема1 Элемент2" ];
Mass[2] = [ "Тема2 Элемент1", "Тема2 Элемент2", "Тема2 Элемент3" ];
var value1 = [];
value1[1] = [ "1", "2" ];
value1[2] = [ "3", "4", "5" ];
function f_change() {
   var index = document.getElementById("select3").value;
   var select4 = document.getElementById("select4");
   var count = Mass[index].length;
   select4.length = count;
   for (i=0; i<count; i++) {
      select4.options[i].value = value1[index][i];
      select4.options[i].text = Mass[index][i];
   }
}
function f_change2() {
   var sel = document.getElementById("select4");
   var msg = "Значение: " + sel.options[sel.selectedIndex].value;
   msg += "\nТекст: " + sel.options[sel.selectedIndex].text;
   window.alert(msg);
}
//-->
</script>
<b>Взаимосвязанные списки:</b><br><br>
<select name="select3" id="select3" size="5" onchange="f_change();">
<option value="1">Тема1</option>
<option value="2">Тема2</option>
</select><br>
<select name="select4" id="select4" onchange="f_change2();">
<option value="1" selected>Тема1 Элемент1</option>
<option value="2">Тема1 Элемент2</option>
</select><br><br>

<!-- Переход на указанный сайт -->

<b>Переход на указанный сайт:</b><br><br>
<select 
onchange="top.location.href=this.options[this.selectedIndex].value;">
<option value="http://www.mail.ru/" selected>Национальная почта Mail.ru
</option>
<option value="http://www.rambler.ru/">Рамблер</option>
</select>
</div>
</form>
</body>
</html>

 

Посмотреть пример...

 

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити