•  
  •  
  •  
  •  
1 1 1 1 1 1 1 1 1 1 Рейтинг 5.00 (1 Голос)
jQuery: процесс работы с Select - 5.0 out of 5 based on 1 vote

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. Блокируем элементы

Блокируем элемент со значением value равным 4

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

Блокируем второй элемент

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

Блокируем первый элемент

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

Блокируем последний элемент

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

Блокируем все элементы содержащие слово "интернет"

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавляем в непосредственное начало Select

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

Добавляем в самый конец Select

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

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

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

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

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

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

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

8. Процесс изменения элемента option

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

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

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

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

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

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

 

Обеспечим вас небольшим примером напоследок:

Услуги компании web-now

Код примера:

<html>
    <head>
        <title>jQuery работа с Select</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <p>Услуги компании web-now</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 option:selected').text('Новый текст!');
                return false;">Изменить текст</button>
    </body>
</html

 

Портфолио
Память о Вас и Ваших близких на многие поколения
Подробнее
Прокат металла
Подробнее
Интернет-магазин кожи и меха
Подробнее
100% оригинальная парфюмерия в Москве
Подробнее
Вьетнамский ресторан премиум класса
Подробнее
Внедрение информационных систем
Подробнее
Организация международных конференций
Подробнее
Производство молочной продукции
Подробнее
Спортивный сайт
Подробнее
Интернет-магазин мебели и аксессуаров
Подробнее
Интернет-магазин электротранспорта
Подробнее
Сайт института актуальной экономики
Подробнее
Наши клиенты
Парк развлечений Boom Zoom
Алгор
Норбит
Molga Consulting
Metrotile
Нетология
Monqi
Премиум Пак
Aasha Herbals
Аджва
Салон красоты Сударушка
Пава
ТЦ &quot;Панфиловский&quot;
Фитнес Лаборатория
Система Главбух
Vanguard
GoAsia
ТЦ «Солнечный ветер»
Teledoc
Tchernov Cable
Отзывы
Благодарю компанию web-now.pro за помощь в разработке и запуске проекта POLITSECRETS.RU. Перед нами стояла задача – внедрить проект в сжатые сроки и по оптимальной цене. Порадовало то, что мне подроб...
Вера БлашенковаСекреты успешных выборов, Москва... апр.2016
Мне очень понравился подход с которым нас встретили "Ваша задача заниматься бизнесом, наша - сделать Вам представительство в сети". После этого ребята разработали полное тз на проект, мы внесли пожела...
МаксимIT-TASK, Москва... янв.2016
Работа проделана хорошо! Дизайнер и менеджер на отлично. Надеюсь на сотрудничество в дальнейшем. Есть шероховатости в деталях по задачам, но приятно сказывается оперативность и желание исправить, внес...
БруноСоциальная сеть След Жизни, Москва... янв.2016
Работой остались очень довольны. К работе подходят ответственно, аккуратно, открыто. Проект был сдан чуть раньше срока, по ходу работы возникали изменения, все они принимались безоговорочно, работа вы...
ЕвгенийМагазин текстиля, Москва... дек.2015
Сотрудничаем с 2007 года и сделали не один проект. Самое главное - команда умеет отстаивать своё мнение и постоянно развивается.
МарияМеждународные конференции, Москва... дек.2015
Спасибо всему коллективу компании! Разработали красивый и что самое главной рабочий интернет магазин! Реклама настроена и запущена, продажи идут, бизнес развивается! Нам постоянно подсказывают о новых...
ВадимИнтернет магазин Aromatic.pro, Москва... сен.2015
Большое спасибо команде за оперативность, качественные работы, отличный креатив и привлекательные цены!
Виктория, ОАО "Фармстандарт... июль.2015
Здравствуйте уважаемые партнеры! С наступающим Новым Годом! Желаю Вам дальнейшего процветания и успехов в Вашей благородной работе! С вами приятно сотрудничать! Очень благодарен Вам за своевременное о...
Сергей ЮрченкоКинотруд, Москва... дек.2014
Благодарим команду Brand Now и лично Дениса Логинова за оригинальное видение,разнообразие идей, четкость взаимодействия и безукоризненное соблюдение сроков выполнения проекта! Планируем продолжить сот...
ТатьянаBizness Linkerz... июль.2014
Компания КУН выражает благодарность за сотрудничество: непростая задача была выполнена в требуемые сроки и полностью удовлетворила заявленному ТЗ. Приятно удивила готовность Генерального директора нач...
Мария, Компания КУНhttp://www.kuhn.com/... апр.2014
Все отзывы
Добавить отзыв