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');