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.