Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Список с возможными значениями
Пример, представленный в листинге 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>
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов