Работа с select элементами с помощью jQuery

jQuery + select = любовь

Понравилась статья? Оставьте оценку:

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)
<select id="select1" name="select1">
<option disabled="disabled">Выберите пункт</option>
<option value="s1">Пункт 1</option>
<option value="s2">Пункт 2</option>
<option value="s3">Пункт 3</option>
</select>

С помощью библиотеки jQuery можно достаточно просто работать с select-ами. Ниже приведены примеры обработки селектов с помощью этой библиотеки. Все примеры основаны на вот этой html разметке:

Получение значения выбранного пункта select-а

Получим значение выбранного пункта (value):

$("#select1 option:selected").val();

Для получения текста выбранного пункта можно использовать функцию text()

$("#select1 option:selected").text();

Снятие/установка значения пункта селект

Очистить выбранное значение селекта:

$('#select1 option').removeAttr('selected');

Установить значение селекта:

$('#select1 option[value=4]').attr('selected', 'selected');

PS. Здесь мы установили для селекта выбранным пункт со значением value=4, а вообще селектор можно составить кучей различных способов. Например выберем в селекте последний пункт:

$('#select1 option:last').attr('selected', 'selected');

или первый

$('#select1 option:first').attr('selected', 'selected');

или 10-ый по счету

$('#select option:nth-child(2)').attr('selected', 'selected');

и так далее

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