jQuery работа с Select

Особого внимание в jQuery удостоен такой элемент, как Select. Сегодня я приведу примеры работы с данным селектором.

<select id="sel" name="sel">
<option value="0">zero</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

1. Получение значения выбранного элемента
$('#sel option:selected').val()

2. Получить текст выбранного элемента
$('#sel option:selected').html();

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

$('#sel').append( $('<option value="4">four</option>') );

4. Добавить элемент в начало списка
$('#sel').prepend( $('<option value="-1">minus</option>') );

5. Вставить элемент после заданного элемента (после второго)
$('#sel option:nth-child(2)').after($('<option value="7">inserted</option>'));

6. Удалить элемент (выбранный)
$('#sel option:selected').remove();

7. Очистить select
$('#sel').empty();

8. Сделать элемент выбранным (последний)
$('#sel option:last').attr('selected', 'selected');

9. Сделать элемент недоступным (первый)
$('#sel option:nth-child(3)').attr('disabled', 'disabled');

10. И немного экзотики :) Изменить цвет текста всех элементов, кроме выбранного
$('#sel :not(option:selected)').css('color', 'red');

11. При изменении значения Select показать его value=""
$('#sel').change(function(){
alert($("#sel option:selected").val());
});

Вот такой вот небольшой и простенький мануальчик по одному из самых популярных селекторов Select.

Rambler's Top100