Список с возможными значениями
Пример, представленный в листинге 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>
<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>
 |
 |
 |