Опубликовано: Алексей Качаев |

Пока работал над своим сервисом собрал коллекцию советов по работе с элементом Список (<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');

Вроде бы все вспомнил. Если вам придумается еще что-то полезное в эту коллекцию - пишите в комментарии

P.S.>>

Наконец-то, я закончил работу с модулем загрузки готовых упражнений для Bank Your Brain. Получилось достаточно красивая масштабируемая система, которую теперь буду понемногу заполнять новым функционалом. Добавил два примера из книги Кореневой Оксаны Геннадиевны (замечательный преподаватель, она у меня читала бухучет в банках).

Пока не стал делать сохранение элементов. Решил сначала написать функционал фильтрации и валидации данных в файлах примеров: пока там все держиться на совести автора, но на совесть сторонних пользователей как раз лучше не надеяться. Сейчас мини-парсер файла минует при чтении строки, которые начинаются со знака #, такая себе система комментирования файла. Хочу сделать ее продвинутие и дать возможность с помощью специальной разметки указывать описание примера, его сложность, автора и т.д. Возможность просмотра такой информации позволит лучше ориентироваться в совокупности примеров, сейчас они вообще безлики

Понравился пост? Будь в курсе последних событий: подпишись на RSS-ленту.!

Также читайте по теме:

• Украина первая в мире по запросу “Zend” (18)
• jQuery + jqModal - обучение на конкретном примере (8)
• PHP и JavaScript: парочка полезных функций (12)
• jQuery: автоматическое исправление тегов (5)
• jQuery, MySQL и полноценное веб-приложение (13)