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

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

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

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

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Пример обработки списков</title>
</head>
<body>
<div class="container my-5">
   <p><b>Добавление пункта в список:</b></p>
   <div class="form-group">
      <label for="txt1">Текст пункта:</label>
      <input type="text" class="form-control" id="txt1">
   </div>
   <div class="form-group">
      <label for="txt2">Значение пункта:</label>
      <input type="text" class="form-control" id="txt2">
   </div>
   <div class="form-group">
      <select id="select1" class="form-control"></select>
   </div>
   <div class="form-group">
      <button type="button" class="btn btn-primary" id="btn1">
         Добавить</button>
   </div>
   
   <p><b>Список со множественным выбором:</b></p>
   <div class="form-group">
      <select id="select2" size="5" multiple class="form-control">
         <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>
   </div>
   <div class="form-group">
      <button type="button" class="btn btn-primary" id="btn2">
         Значения списка</button>
   </div>
   
   <p><b>Взаимосвязанные списки:</b></p>
   <div class="form-group">
      <select id="select3" size="5" class="form-control">
         <option value="0">Тема1</option>
         <option value="1">Тема2</option>
      </select>
   </div>
   <div class="form-group">
      <select id="select4" class="form-control">
      </select>
   </div>
   
   <p><b>Переход на указанный сайт:</b></p>
   <div class="form-group">
      <select id="select5" class="form-control mb-5">
         <option value="0" selected>----------------</option>
         <option value="https://www.mail.ru/">Mail.ru</option>
         <option value="https://www.rambler.ru/">Рамблер</option>
      </select>
   </div>
</div>

<script src="js/jquery.min.js"></script>
<script>
var arr = [];
arr[0] = [ ['Тема1 Элемент1', '1'], ['Тема1 Элемент2', '2'] ];
arr[1] = [ ['Тема2 Элемент1', '3'], ['Тема2 Элемент2', '4'],
           ['Тема2 Элемент3', '5'] ];
function addItem() {
   // Добавление пункта в список
   var txt1 = $('#txt1');
   var txt2 = $('#txt2');
   var text1 = txt1.val();
   var text2 = txt2.val();
   if (text1 === '') {
      window.alert('Поле не заполнено!');
      txt1[0].focus();
      return;
   }
   if (text2 === '') {
      window.alert('Поле не заполнено!');
      txt2[0].focus();
      return;
   }
   var select1 = $('#select1')[0];
   var i = select1.length++;
   console.log(select1.length);
   select1.options[i].text = text1;
   select1.options[i].value = text2;
   txt1.val('');
   txt2.val('');
   txt1[0].focus();
}
$(function() {
   // Добавление пункта в список
   $('#txt1').keypress( function(e) {
      if (e.which === 13) {
         $('#txt2')[0].focus();
         return false;
      }
   });
   $('#txt2').keypress( function(e) {
      if (e.which === 13) {
         addItem();
         return false;
      }
   });
   $('#btn1').click( function() {
      addItem();
   });
   // Список со множественным выбором
   $('#btn2').click( function() {
      var msg = '';
      $('#select2 option:selected').each( function() {
         msg += this.value + ' - ' + this.text + '\n';
      });
      if (msg === '') window.alert('Выбранных пунктов нет');
      else window.alert(msg);
   });
   // Взаимосвязанные списки
   $('#select3').change( function() {
      var index = parseInt(this.value);
      var count = arr[index].length;
      var select4 = $('#select4')[0];
      select4.length = count;
      for (i = 0; i < count; i++) {
         select4.options[i].value = arr[index][i][1];
         select4.options[i].text = arr[index][i][0];
      }
   });
   $('#select4').change( function() {
      var msg = '';
      $('#select4 option:selected').each( function() {
         msg = 'Значение: ' + this.value;
         msg += '\nТекст: ' + this.text;
      });
      window.alert(msg);
   });
   // Переход на указанный сайт
   $('#select5').change( function() {
      var url = $(this).val();
      if (url !== '0') {
         window.top.location.href = url;
      }
   });
});
</script>
</body>
</html>

Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

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