jQuery примеры - работа с выпадающим списком
11 января 2010, 16:07
Автор: Snowcore
Публикую статью со своего блога. В последние пару лет jQuery стал очень популярным. Этот javascript framework легко изучается, производительность и большой спектр его возможностей очень радуют. Селекторы jQuery позволяют производить выборку элементов по разным критериям. Селекторы являются одной из главных частей фреймворка, поэтому необходимо уметь грамотно ими пользоваться. Учиться лучше всего на примерах. Поэтому я хочу поделиться с Вами информацией о методах работы с конткретными HTML элементами при помощи jQuery. Первая заметка - о работе с HTML элементом <select>
Работа с выпадающим списком в jQuery
Основными дейсвиями, которые производятся над выпадающим списком является получение выбранного значения, добавление/удаление элементов из списка, изменение их атрибутов.
Рассмотрим эти действия по порядку. Например, у нас есть select с id="sel":
1. Получение значения выбранного элемента
2. Получить текст выбранного элемента
3. Добавить элемент в конец списка
4. Добавить элемент в начало списка
5. Вставить элемент после заданного элемента (после второго)
6. Удалить элемент (выбранный)
7. Очистить select
8. Сделать элемент выбранным (последний)
9. Сделать элемент недоступным (первый)
10. И немного экзотики :) Изменить цвет текста всех элементов, кроме выбранного
Как видите, ничего сложного здесь нет. В следующих постах будет рассмотрена информация о работе с другими HTML элементами на jQuery.
Работа с выпадающим списком в 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.
