Работа с select с помощью JQuery

Сборник методов JQuery для работы с выпадающими списками <select>.

1

Получить значение выбранного элемента

$('#select').val();
// или
$('select[name=fruct]').val();
JS

Для списков с множественном выбором (multiple) метод val() вернет значения в виде массива.

2

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

$('#select option:selected').text();
// или
$('#select option:selected').html();
JS
3

Узнать сколько элементов option в списке select

$('#select option').size();
JS

Узнать количество выбранных элементов

$('#select option:selected').size();
JS
4

Выбор элементов

Выбрать первый элемент

$('#select option:first').prop('selected', true);
JS

Выбрать последний элемент

$('#select option:last').prop('selected', true);
JS

Выбрать элемент c value = 2

$('#select option[value=2]').prop('selected', true);
JS

Выбрать элемент содержащий текст «виноград»

$('#select option:contains("виноград")').prop('selected', true);
JS

Выбрать все элементы

$('#select option').prop('selected', true);
JS

Снять выделение

$('#select option').prop('selected', false);
JS
5

Заблокировать и разблокировать select

// Заблокировать
$('#select').prop('disabled', true);

// Разблокировать
$('#select').prop('disabled', false);
JS
6

Добавление option в select

Добавить элемент в начало select

$('#select').prepend('<option value="">новый option</option>');
JS

Добавить элемент в конец select

$('#select').append('<option value="">новый option</option>');
JS

Добавить элемент до и после option c value = 2

// До
$('#select option[value=2]').before('<option value="">новый option</option>');

// После
$('#select option[value=2]').after('<option value="">новый option</option>');
JS

Добавить элемент до и после option c текстом «апельсин»

// До
$('#select option:contains("апельсин")').before('<option value="">новый option</option>');

// После
$('#select option:contains("апельсин")').after('<option value="">новый option</option>');
JS

Добавление элементов в optgroup

// Добавить элемент в начало группы «Фрукты»
$('#select optgroup[label=Фрукты]').prepend('<option value="">новый option</option>');

// Добавить элемент в конец группы «Фрукты»
$('#select optgroup[label=Фрукты]').append('<option value="">новый option</option>');
JS

Добавить элементы option в select из массива

var array = {1: 'яблоко', 2: 'апельсин', 3: 'виноград'};

$.each(array, function(key, value) {
	$('#select').append('<option value="' + key + '">' + value + '</option>');
});
JS
7

Удаление option из select

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

$('#select option:selected').remove();
JS

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

$('#select option:first').remove();
JS

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

$('#select option:last').remove();
JS

Удалить элемент c value = 4

$('#select option[value=4]').remove();
JS

Удалить элемент содержащий текст «виноград»

$('#select option:contains("виноград")').remove();
JS

Очистить весь select

$('#select').empty();
// или
$('#select option').remove();
JS
05.11.2017, обновлено 10.09.2019 16239
Предыдущая запись Работа с Input Text jQuery
Следующая запись Работа с checkbox с помощью JQuery

Поделится

Другие публикации

В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для...
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать...
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все...
В статье приведен пример формы и php скрипта для безопасной загрузки файлов на сервер, метод отправки файлов через...
Smarty это компилирующий обработчик шаблонов для PHP позволяющий отделить логику и HTML-верстку веб-приложения.