jQuery: селекторы - SELECT
|
jQuery: 8 полезных советов при работе с элементом SELECT |
Итак, когда вы работаете с динамически заполняемым списком, вам нужно уметь:
1. Удалить все элементы списка
$('select[@name=mySelect] option').remove();
2. Добавить в список новый элемент
$('select[@name=mySelect]').append('<option>Новый элемент списка</option>');
У меня, к примеру, список формируется из XML данных таким образом:
$(xml).find('file').each( function(){ $('select[@name=loadFileName]') .append('<option>'+$(this).find('title').text()+'</option>'); });
Схема здесь проста: мы ищем все теги <file>, обрабатываем их с помощью .each() - находим <title></title> и загоняем текст в следующий пункт списка.
3. Сделать выделенным первый пунки списка
$('select[@name=loadFileName] option:first').attr('selected', 'yes');
4. Принудительно снять выделение с элемента списка
$('select[@name=loadFileName] option:first').removeAttr('selected');
5. Получить значение выделенного пункта из списка
Тут есть два варианта. Первый, если вы используете аттрибут <option value=”some value”>:
var file = $('select[@name=loadFileName] option:selected').val();
И второй вариант: вы не задаете value, вас интересует то, что заключено между <option>…</option> (как у меня в проекте):
var file = $('select[@name=loadFileName] option:selected').text();
Теперь переменная file содержит нужное нам значение.
6. Проверить, выбран ли какой-нибудь элемент списка
Это нужно делать обязательно, иначе в приложении могут возникнуть проблемы.
if( typeof $('select[@name=loadFileName] option:selected').text() === 'undefined' ){ alert('Ни один элемент списка не выбран'); }
7. Превратить список в “автомасштабируемый”
Т.е. отобразить в списке ровно столько элементов, сколько в нем есть:
$('select[@name=loadFileName]') .attr('size', $('select[@name=loadFileName] option').size());
8. Сделать недоступны для выбора отдельный элемент
$('select[@name=loadFileName] option:contains('текст нужного элемента')') .attr('disabled', 'disabled');
Разрешить выделение всех ранее недоступных элементов можно так:
$('select[@name=loadFileName] option:disabled').removeAttr('disabled');
« Назад