jQuery: селекторы - SELECT


jQuery: селекторы - SELECT
jQuery: 8 полезных советов при работе с элементом SELECT
собрал коллекцию советов по работе с элементом Список (<select>) с помощью jQuery. Все эти советы максимально полезны в том случае, если список формируется и обрабатывается динамически. В моем случае это <select name=”loadFileName”>, которые заполняется динамически результатом ajax-запроса и содержит доступные для загрузки файлы.

Итак, когда вы работаете с динамически заполняемым списком, вам нужно уметь:

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');
© http://www.kachayev.ru/

Оценить Статью:  
1   2   3   4   5   6   7   8   9   10    

« Назад
SAPE все усложнил?

MainLink - простая и прибыльная продажа ссылок!

Последние поступления:

ТехЗадание на Землю

Размещена 14 марта 2018 года

Пpоект Genesis (из коpпоpативной пеpеписки)

читать далее…

Шпаргалка по работе с Vim

Размещена 05 декабря 2017 года

Vim довольно мощный редактор, но работа с ним не всегда наглядна.
Например если нужно отредактировать какой-то файл например при помощи crontab, без знания специфики работы с viv никак.

читать далее…

Ошибка: Error: Cannot find a valid baseurl for repo

Размещена 13 сентабря 2017 года

Если возникает ошибка на centos 5 вида
YumRepo Error: All mirror URLs are not using ftp, http[s] or file.
Eg. Invalid release/

читать далее…

Linux Optimization

Размещена 30 июля 2012 года

Prelink

читать далее…

Размещена 06 апреля 2012 года

С детства мечтаю увидеть трёх животных: ёшкиного кота, бляху муху и сидорую козу!!!