На веб-странице находится выпадающий список с возможностью одновременного выбора нескольких опций. Необходимо отслеживать, какие именно опции были выбраны.
Решение
Для решения задачи применим фильтр :selected (листинг 1.8.3).
Листинг1 .8 .3 . Использование фильтра :selected
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-1-8-3</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("select").change(function() { var str = ""; $("select option:selected").each(function() { str += $(this).text() + " "; }); $("div").text(str); }).change(); }); </script> </head> <body> <select name="colors" multiple="multiple"> <option>Красный</option> <option selected="selected">Оранжевый</option> <option>Желтый</option> <option selected="selected">Зеленый</option> <option>Голубой</option> <option>Синий</option> <option>Фиолетовый</option> </select> </body> </html> |
Обсуждение
В листинге 1.8.3 HTML-разметка очень простая — элемент select с возможностью выбора сразу нескольких опций, две из которых уже заданы по умолчанию, и пустой элемент div, в который мы будем вставлять содержимое всех выбранных опций.
Посмотрим на JavaScript-код. Первое, что мы делаем, — находим элемент select и связываем с ним событие change, при наступлении которого будет вызвана callbackфункция. Каждый раз при вызове функции в переменную str записывается пустая строка. Затем в элементе select будут обнаружены все выбранные опции. Это мы проделаем с помощью фильтра :selected. Поскольку таких опций может быть несколько, потребуется метод each(), который позволит применить функцию, указанную в качестве его аргумента, к каждому выбранному элементу. Таким образом, мы получаем возможность сформировать в переменной str строку, содержащую текст всех выбранных значений списка. После завершения итераций мы вставляем текст готовой строки в элемент div. И последнее, что нам осталось сделать, —
с помощью вызова метода change() без передачи ему аргументов, имитировать событие change при загрузке страницы.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)