jQuery работа с выпадающим списком select (пример)
Очень часто приходится сталкиваться с выпадающим HTML списком <select>, и тогда возникают вопросы, как можно управлять им. Данная статья посвящена некоторым селекторам jQuery для работы со списком <select>. Работа с выпадающим списком с помощью jQuery также проста, как и работа с любым другим элементом.
Как это работает?
Для начала определим простенький выпадающий список, чтобы наглядно показать работу селекторов:
|
1 2 3 4 5 6 7 8 9 |
<select id="test_select" name="test_select"> <option value=""></option> <option value="1">Первое поле имеет значение value=1</option> <option value="2">Второе поле имеет значение value=2</option> <option value="3">Третье поле имеет значение value=3</option> <option value="4">Четвертое поле имеет значение value=4</option> <option value="5">Пятое поле имеет значение value=5</option> <option value="6">Шестое поле имеет значение value=6</option> </select> |
Обратите внимание на то, что также был добавлен пустой элемент списка, это нам пригодится, чтобы проверить выбран хоть один элемент списка или нет, а также для сброса выбора.
1 — Получить значение выбранного элемента:
|
1 2 3 4 5 |
$("#test_select option:selected").val(); сокращенно: $("#test_select :selected").val(); или: $("select#test_select").val(); |
2 — Получить текст того же выбранного элемента:
|
1 2 3 |
$("#test_select :selected").html(); или: $("#test_select :selected").text(); |
3 — Сделать <select> недоступным:
|
1 |
$("#test_select").attr("disabled",true); |
4 — Разблокировать <select>:
|
1 |
$("#test_select").attr("disabled",false); |
5 — Удалить выбранный элемент:
|
1 |
$("#test_select :selected").remove(); |
6 — Удалить первый элемент:
|
1 |
$("#test_select :first").remove(); |
7 — Удалить последний элемент:
|
1 |
$("#test_select :last").remove(); |
8 — Удалить элемент, у которого value=’2′:
|
1 2 3 |
$("#test_select option[value='2']").remove(); сокращенно: $("#test_select [value='2']").remove(); |
9 — Очистить весь список <select>:
|
1 2 3 |
$("#test_select").empty(); или: $('option', $("#test_select")).remove(); |
10 — Перебрать все элементы списка <select>:
|
1 2 3 |
$('#test_select option').each(function(){ alert(this.text); }); |
11 — Сделать выбранным последний элемент:
|
1 |
$("#test_select :last").attr("selected", "selected"); |
12 — Сделать выбранным второй элемент:
|
1 |
$("#test_select :nth-child(2)").attr("selected", "selected"); |
13 — Сделать выбранным элемент, содержащий текст ‘Второе поле имеет значение value=2’:
|
1 2 3 4 5 6 7 |
$("#test_select :contains('Второе поле имеет значение value=2')").attr("selected", "selected"); или: $("#test_select").find("option:contains('Второе поле имеет значение value=2')").attr("selected","selected"); или только первое вхождение: $("#test_select :contains('Второе поле имеет значение value=2')").first().attr("selected", "selected"); или: $("#test_select").find("option:contains('Второе поле имеет значение value=2')").first().attr("selected","selected"); |
14 — Сделать выбранным элемент, value которого = 2:
|
1 |
$("#test_select [value='2']").attr("selected", "selected"); |
15 — Добавить элемент в начало списка <select>:
|
1 |
$("#test_select").prepend( $('<option value="0">Нулевое поле имеет значение value=0</option>')); |
16 — Добавить элемент в конец списка <select>:
|
1 |
$("#test_select").append( $('<option value="7">Седьмое поле имеет значение value=7</option>')); |
17 — Добавить новый элемент после второго:
|
1 |
$("#test_select option:nth-child(2)").after($('<option value="22">twotwo</option>')); |
18 — Количество элементов option в списке <select>:
|
1 |
$("select[id=test_select] option").size(); |
19 — Проверяем, выбран ли элемент в списке <select>:
|
1 |
if($("#test_select").val()) |
20 — Сделать все элементы в списке <select> не выбранными:
|
1 2 3 |
$('#test_select option:selected').each(function(){ this.selected=false; }); |
21 — Добавить несколько элементов option в список <select> из массива:
|
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 |
//добавим эти элементы несколькими способами var newOptions = { "key_1": "test 1", "key_2": "test 2" }; //способ 1 $.each(newOptions, function(key, value) { $('select#test_select').append($(new Option(key, value))); }); //способ 2 var new_options = ''; $.each(newOptions, function(key, value) { new_options += '' + value + ''; }); $('#test_select').html(new_options); //способ 3 var select = $('#test_select'); if(select.prop) { var options = select.prop('options'); } else { var options = select.attr('options'); } $.each(newOptions, function(val, text) { options[options.length] = new Option(text, val); }); |
Так же Вы можете скачать пример работы скрипта из вложения в конце статьи для большего понимания.
Полагаю этого вполне достаточно для управления списками. Если у Вас есть, что дополнить к этому, пишите в комментариях.
Комментарии
Здесь еще никто не оставлял комментарии.