JS/jQuery

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

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

1

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

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

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

2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$('#select').empty();
// или
$('#select option').remove();
05 ноября 2017