jQuery работа с выпадающим списком select (пример)

Очень часто приходится сталкиваться с выпадающим HTML списком <select>, и тогда возникают вопросы, как можно управлять им. Данная статья посвящена некоторым селекторам jQuery для работы со списком <select>.

Как это работает:

Для начала определим простенький выпадающий список, чтобы наглядно показать работу селекторов:

<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 - Получить значение выбранного элемента:

$("#test_select option:selected").val();
сокращенно:
$("#test_select :selected").val();
или:
$("select#test_select").val();

2 - Получить текст того же выбранного элемента:

$("#test_select :selected").html();
или:
$("#test_select :selected").text();

3 - Сделать <select> недоступным:

$("#test_select").attr("disabled",true);

4 - Разблокировать <select>:

$("#test_select").attr("disabled",false);

5 - Удалить выбранный элемент:

$("#test_select :selected").remove();

6 - Удалить первый элемент:

$("#test_select :first").remove();

7 - Удалить последний элемент:

$("#test_select :last").remove();

8 - Удалить элемент, у которого value='2':

$("#test_select option[value='2']").remove();
сокращенно: 
$("#test_select [value='2']").remove();

9 - Очистить весь список <select>:

$("#test_select").empty();
или: 
$('option', $("#test_select")).remove();

10 - Перебрать все элементы списка <select>:

$('#test_select option').each(function(){
alert(this.text);
});

11 - Сделать выбранным последний элемент:

$("#test_select :last").attr("selected", "selected");

12 - Сделать выбранным второй элемент:

$("#test_select :nth-child(2)").attr("selected", "selected");

13 - Сделать выбранным элемент, содержащий текст 'Второе поле имеет значение value=2':

$("#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:

$("#test_select [value='2']").attr("selected", "selected");

15 - Добавить элемент в начало списка <select>:

$("#test_select").prepend( $('<option value="0">Нулевое поле имеет значение value=0</option>'));

16 - Добавить элемент в конец списка <select>:

$("#test_select").append( $('<option value="7">Седьмое поле имеет значение value=7</option>'));

17 - Добавить новый элемент после второго:

$("#test_select option:nth-child(2)").after($('<option value="22">twotwo</option>'));

18 - Количество элементов option в списке <select>:

$("select[id=test_select] option").size();

19 - Проверяем, выбран ли элемент в списке <select>:

if($("#test_select").val())

20 - Сделать все элементы в списке <select> не выбранными:

$('#test_select option:selected').each(function(){
this.selected=false;
});

21 - Добавить несколько элементов option в список <select> из массива:

//добавим эти элементы несколькими способами
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);
});

Так же Вы можете скачать пример работы скрипта из вложения в конце статьи для большего понимания.

Полагаю этого вполне достаточно для управления списками. Если у Вас есть, что дополнить к этому, пишите в комментариях.

Демо


Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 2500 Ограничение символов
Ваш текст должен быть в пределах 10-2500 символов
Комментарии | Добавить свои
  • Комментарии не найдены