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

Пример, представленный в листинге 8.4, демонстрирует следующие возможности.

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

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

<!doctype html>
<html>
<head>
<title>Пример обработки списков</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
var arr = [];
arr[1] = ["Тема1 Элемент1", "Тема1 Элемент2"];
arr[2] = ["Тема2 Элемент1", "Тема2 Элемент2", "Тема2 Элемент3"];
var val = [];
val[1] = ["1", "2"];
val[2] = ["3", "4", "5"];
function f_click() {
   // Добавление пункта в список
   var pole1 = $("#pole1");
   var pole2 = $("#pole2");
   var text1 = pole1.val();
   var text2 = pole2.val();
   if (text1 != "" && text2 != "") {
      var sel1 = $("#select1").get(0);
      var i = sel1.length++;
      sel1.options[i].text = text1;
      sel1.options[i].value = text2;
      pole1.val("");
      pole2.val("");
      pole1.focus();
   }
   else {
      alert("Поле не заполнено!");
      pole1.focus();
   }
}
$(document).ready(function() {
   // Добавление пункта в список
   $("#pole1").keypress(function(e) {
      if (e.keyCode==13) {
         $("#pole2").focus();
         return false;
      }
   });
   $("#pole2").keypress(function(e) {
      if (e.keyCode==13) {
         f_click();
         return false;
      }
   });
   $("#btn1").click(function() {
      f_click();
   });
   // Список со множественным выбором
   $("#btn2").click(function() {
      var msg = "";
      $("#select2 option:selected").each(function() {
         msg += this.value + " - " + this.text + "\n";
      });
      if (msg == "") alert("Выбранных пунктов нет");
      else alert(msg);
   });
   // Взаимосвязанные списки
   $("#select3").change(function() {
      var index = this.value;
      var count = arr[index].length;
      var el = $("#select4").get(0);
      el.length = count;
      for (i=0; i<count; i++) {
         el.options[i].value = val[index][i];
         el.options[i].text = arr[index][i];
      }
   });
   $("#select4").change(function() {
      var msg = "";
      $("#select4 option:selected").each(function() {
         msg = "Значение: " + this.value;
         msg += "\nТекст: " + this.text;
      });
      alert(msg);
   });
   // Переход на указанный сайт
   $("#select5").change(function() {
      var url = $(this).val();
      if (url != 0) {
         window.location.href = url;
      }
   });
});
</script>
</head>
<body>
<b>Добавление пункта в список:</b><br><br>
Текст пункта:<br>
<input type="text" id="pole1"><br>
Значение пункта:<br>
<input type="text" id="pole2"><br>
<select id="select1">
</select><br>
<input type="button" value="Добавить" id="btn1"><br><br>

<b>Список со множественным выбором:</b><br><br>
<select 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="Значения списка" id="btn2"><br><br>

<b>Взаимосвязанные списки:</b><br><br>
<select id="select3" size="5">
<option value="1">Тема1</option>
<option value="2">Тема2</option>
</select><br>
<select id="select4">
<option value="1" selected>Тема1 Элемент1</option>
<option value="2">Тема1 Элемент2</option>
</select><br><br>

<b>Переход на указанный сайт:</b><br><br>
<select id="select5">
<option value="0" selected>----------------</option>
<option value="http://www.mail.ru/">Mail.ru</option>
<option value="http://www.rambler.ru/">Рамблер</option>
</select><br>
</body>
</html>

Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

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

Помощь сайту

Поиск по сайту в Яндексе