jQuery работа с Select

При разработке интернет магазинов очень важно сделать их не просто красивыми, но и удобными. Это будет большим плюсом для покупателей и поисковых систем. Интернет-магазин должен максимально быстро помогать пользователю сделать выбор. Например, в подборе товаров интернет магазина одежды, при выборе покупателем 52 размера, все остальные параметры (тип, цвет, состав и др.) должны автоматически меняться на те значения, которые относятся к 52 размеру.

Рассмотрим примеры управление выподающими списками:

1. Снять выбранный элемент

$('#select option').removeAttr('selected');

2. Получить значение выбранного элемента

Получить значение value выбранного элемента option

$('#select option:selected').val()

Получить значение текста выбранного элемента

$('#select option:selected').text()

3. Выбор элемента

Выбрать элемент со значением value равным 4

$('#select option[value=4]').attr('selected', 'selected');

Выбрать второй элемент

$('#select option:nth-child(2)').attr('selected', 'selected');

Выбрать первый элемент

$('#select option:first').attr('selected', 'selected');

Выбрать последний элемент

$('#select option:last').attr('selected', 'selected');

Выбрать элемент содержащий слово "Разработка сайтов"

$('#select option:contains(Разработка сайтов)').attr('selected', 'selected');

4. Удаление элемента option

Удалить элемент option со значением value равным 3

$('#select option[value=3]').remove()

Удалить второй элемент

$('#select option:nth-child(2)').remove()

Удалить первый элемент

$('#select option:first').remove()

Удалить последний элемент

$('#select option:last').remove()

Удалить все элементы содержащие слово "интернет"

$('#select option:contains(интернет)').remove()

5. Блокировка элементов

Заблокировать элемент со значением value равным 4

$('#select option[value=4]').attr('disabled', 'disabled');

Заблокировать второй элемент

$('#select option:nth-child(2)').attr('disabled', 'disabled');

Заблокировать первый элемент

$('#select option:first').attr('disabled', 'disabled');

Заблокировать последний элемент

$('#select option:last').attr('disabled', 'disabled');

Заблокировать все элементы содержащие слово "интернет"

$('#select option:contains(интернет)').attr('selected', 'selected');

6. Разблокировка элементов

Разблокировать элемент со значением value равным 4

$('#select option[value=4]').removeAttr('disabled');

Разблокировать второй элемент

$('#select option:nth-child(2)').removeAttr('disabled');

Разблокировать первый элемент

$('#select option:first').removeAttr('disabled');

Разблокировать последний элемент

$('#select option:last').removeAttr('disabled');

Разблокировать все элементы содержащие слово "интернет"

$('#select option:contains(интернет)').removeAttr('disabled')

7. Добавление элементов

Добавить в самое начала Select

$('#select').prepend('<option value="10">Добавить в самое начала Select</option>');

Добавить в самый конец Select

$('#select').append('<option value="20">Добавить в самый конец Select</option>');

Добавить после второго элемента

$('#select option:nth-child(2)').after('<option value="30">Добавить после второго элемента</option>');

Добавить после элемента со значением 4

$('#select option[value=4]').after($('<option value="40">Добавить после элемента со значением 4</option>'));

Добавить до элемента со значением 4

$('#select option[value=4]').before($('<option value="52">Добавить до элемента со значением 4</option>'))

8. Изменение элемента option

Поменяем текст тега option у выбранного элемента

$('#select option:selected').text('Новый текст!');

Поменяем значение атрибута value у выбранного элемента

$('#select option:selected').val('Новое значение value');

Тут как и в других примерах вы можете использовать селекторы для поиска тега option, например:

$('#select option[value=4]').text('Новый текст у 4-ого элемента!');

И как обычно небольшой пример:

<html>
    <head>
        <title>jQuery работа с Select | Дизайн студия OX2</title>
        <script type="text/javascript" src="http://ox2.ru/lib/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <p>Услуги компании "OX2"</p>
        <select id="select">
            <option value="0" selected="selected">Выбрать</option>
            <option value="1">Разработка интернет магазинов</option>
            <option value="2">Разработка сайтов</option>
            <option value="3">Продвижение интернет магазинов</option>
            <option value="4">Продвижение в социальных сетях</option>
            <option value="5">Анализ сайтов</option>
            <option value="6">Наполнение интернет магазинов</option>
        </select>

        <button onclick="
                $('#select option').removeAttr('selected');
                return false;">Снять выбранный элемент</button>


        <button onclick="
                $('#select option').removeAttr('selected'); //Снимаем все выбранные элементы
                $('#select option[value=4]').attr('selected', 'selected'); //Выбираем элемент со значением value равным 4
                return false;">Выбираем 4-ый элемент!</button>

        <button onclick="$('#select option:first').remove();
                return false;">Удаляем первый элемент</button>

        <button onclick="$('#select option:nth-child(2)').attr('disabled', 'disabled');
                return false;">Заблокировать второй элемент</button>
        <button onclick="$('#select option:nth-child(2)').removeAttr('disabled');
                return false;">Разблокировать второй элемент</button>
        
        
        <button onclick="$('#select').prepend('<option value='10'>Добавить в самое начала Select</option>');
                return false;">Добавить в самое начала Select</button>
    
        
        <button onclick="$('#select option:selected').text('Новый текст!');
                return false;">Изменить текст</button>
    </body>
</html>

Пример работы примера:

Услуги компании "OX2"

Скачать исходник

Предыдущая статья Вернуться Следующая статья

Комментарии (Написать комментарий)

Ingvar [26.01.2016]

Комментарий:
Рассмотрим примеры управление выпОдающими списками: :)

Ваше имя
Комментарий