Работа с выпадающим списком в jQuery
Основными дейсвиями, которые производятся над выпадающим списком является получение выбранного значения, добавление/удаление элементов из списка, изменение их атрибутов.
Рассмотрим эти действия по порядку. Например, у нас есть select с id="sel":
<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>
<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');
Как видите, ничего сложного здесь нет. В следующих постах будет рассмотрена информация о работе с другими HTML элементами на jQuery.
