jQuery работа с элементом select

07.03.2012
Примеры как работать со списком (тэгом select) через jQuery. Динамически создавать и удалять элементы, получить значение выбранного элемента списка и т.д.

Предположим у нас есть список с id "color" 

1
2
3
4
5
6
 
<select id="color">
    <option value="blue">Синий</option>
    <option value="brown">Коричневый</option>
    <option value="burgundy">Бордовый</option>
    <option value="cornflower">Васильковый</option>
</select>

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

$("#color option:selected").val()

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

$("#color option:selected").html();

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

$("#color").append( $('<option value="cream">Кремовый</option>') );

Добавить элемент в начало списка

$("#color").prepend( $('<option value="cream">Кремовый</option>') );

Вставить элемент после заданного элемента (после второго, нумерация с нуля)

$("#color option:nth-child(1)").after($('<option value="cream">Кремовый</option>'));

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

$("#color option:selected").remove();

Очистить select

$("#color").empty();

Сделать элемент выбранным (последний)

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

Сделать элемент недоступным (третий)

$("#color option:nth-child(2)").attr("disabled", "disabled");
Категории: JQuery
Яндекс.Метрика