Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 17.06.2019, 01:09   #1
fromthemoon
Пользователь
 
Регистрация: 17.06.2019
Сообщений: 29
Репутация: 10
По умолчанию Зависимый селект

Уважаемые участники форума, прошу помочь!

Имеется вот такая конструкция - https://jsfiddle.net/fromthemoon/gomstx74/

Необходимо, чтобы при выборе в первом селекте выводилась соответствующая optgroup'а. Каким образом можно скрыть не нужные виды покрытий во втором селекте, без изменения HTML-разметки, прям вот как есть. Заранее благодарю за помощь!
fromthemoon вне форума   Ответить с цитированием
Старый 17.06.2019, 02:06   #2
Вадим Мошев

Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: programmersforum
Сообщений: 8,369
Репутация: 4056
По умолчанию

Установите всем опшнГруппам свойство display: none по умолчанию.
Когда выбираете в первом селекте какое-то значение, вам надо найти опшнГрупп, у которого лейбл совпадает с выбранным значением в первом селекте. У найденного опшнГруппа ставите display: block, при этом запоминаете ссылку на этот групп в какой-то переменной. Когда выбираете другое значение, запомненному в переменной группу ставите снова дисплей нон, а потом повторяете все действия, что я описал.
Вадим Мошев вне форума   Ответить с цитированием
Старый 17.06.2019, 11:52   #3
fromthemoon
Пользователь
 
Регистрация: 17.06.2019
Сообщений: 29
Репутация: 10
По умолчанию

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
Установите всем опшнГруппам свойство display: none по умолчанию.
Я мысленно понимаю как это должно в процессе работать, но к своему сожалению не имею навыков в написании кода, синтаксис Javascript для меня остается дремучим лесом. Понимаю, что следует изучить материал, но нужно сделать данную причуду быстрее, т.е. на изучение нет времени, потому брожу по форумам и терроризирую всех своими глупыми вопросами

Последний раз редактировалось fromthemoon; 17.06.2019 в 17:23.
fromthemoon вне форума   Ответить с цитированием
Старый 17.06.2019, 23:02   #4
fromthemoon
Пользователь
 
Регистрация: 17.06.2019
Сообщений: 29
Репутация: 10
По умолчанию

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
Установите всем опшнГруппам свойство display: none по умолчанию.
Когда выбираете в первом селекте какое-то значение, вам надо найти опшнГрупп, у которого лейбл совпадает с выбранным значением в первом селекте. У найденного опшнГруппа ставите display: block, при этом запоминаете ссылку на этот групп в какой-то переменной. Когда выбираете другое значение, запомненному в переменной группу ставите снова дисплей нон, а потом повторяете все действия, что я описал.
https://jsfiddle.net/fromthemoon/c9jkrqbz/3/ - попытался сам написать, но теперь они показываются все разом, как это исправить?
fromthemoon вне форума   Ответить с цитированием
Старый 18.06.2019, 19:06   #5
web-coder
Форумчанин
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 68
Репутация: 141
По умолчанию

Цитата:
попытался сам написать, но теперь они показываются все разом, как это исправить?
1. Уберите лишние class="active" (для всех optgroup, кроме первой)
2. Если вы подключили jquery, то логику переключателя можно сделать так
Код:
$(document).on('change', '#pokr', function(){
	var pokr = $(this).val();
	$('#colors optgroup.active').removeClass('active');
	$('#colors optgroup[label="'+pokr+'"]').addClass('active');
});
web-coder вне форума   Ответить с цитированием
Старый 18.06.2019, 20:54   #6
fromthemoon
Пользователь
 
Регистрация: 17.06.2019
Сообщений: 29
Репутация: 10
По умолчанию

Цитата:
Сообщение от web-coder Посмотреть сообщение
1. Уберите лишние class="active" (для всех optgroup, кроме первой)
2. Если вы подключили jquery, то логику переключателя можно сделать так
Код:
$(document).on('change', '#pokr', function(){
	var pokr = $(this).val();
	$('#colors optgroup.active').removeClass('active');
	$('#colors optgroup[label="'+pokr+'"]').addClass('active');
});
Круто, спасибо, но пропали иконки, которые были там в виде изображений, простите за тупизм
fromthemoon вне форума   Ответить с цитированием
Старый 18.06.2019, 21:22   #7
web-coder
Форумчанин
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 68
Репутация: 141
По умолчанию

Цитата:
Сообщение от fromthemoon Посмотреть сообщение
пропали иконки, которые были там в виде изображений, простите за тупизм
Иконок там и не было.
Вижу вы пытались их добавить таким образом
Код:
<option value="Белая" class="icon-acrylic-white">Белая</option>
Код:
.icon-acrylic-white {
    background: url('https://i.ibb.co/dMJG3bs/acrylic-white.png') no-repeat;
    background-size: 20px;
    padding-left: 30px;
    background-position: 3px 1px;
}
Но проблема в том, что списки нельзя так кастомизировать.
Для этого есть специальные плагины. Например https://select2.org
web-coder вне форума   Ответить с цитированием
Старый 18.06.2019, 21:27   #8
fromthemoon
Пользователь
 
Регистрация: 17.06.2019
Сообщений: 29
Репутация: 10
По умолчанию

Цитата:
Сообщение от web-coder Посмотреть сообщение
Для этого есть специальные плагины. Например https://select2.org
К сожалению кастомы нельзя использовать, это конструктор и там вся разметка завязана на своих скриптах.

P.S. Одной и главной ошибкой было создание этого сайта на конструкторе
fromthemoon вне форума   Ответить с цитированием
Старый 18.06.2019, 21:34   #9
web-coder
Форумчанин
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 68
Репутация: 141
По умолчанию

Цитата:
Сообщение от fromthemoon Посмотреть сообщение
К сожалению кастомы нельзя использовать
Значит вставить иконки в список не получится.
web-coder вне форума   Ответить с цитированием
Старый 18.06.2019, 21:42   #10
fromthemoon
Пользователь
 
Регистрация: 17.06.2019
Сообщений: 29
Репутация: 10
По умолчанию

Цитата:
Сообщение от web-coder Посмотреть сообщение
Значит вставить иконки в список не получится.
Не совсем так - https://smirnovstolyar.ru/krovati, например, самая первая кровать
fromthemoon вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Зависимый div Dimafly HTML и CSS 2 28.02.2014 20:36
Раскрывающий зависимый список в форме. uznknown1 Microsoft Office Excel 26 05.01.2014 18:49
Не получается прикрутить селект. Predator199 JavaScript, Ajax 1 17.10.2012 20:42
Поиск в списке селект zatocnik JavaScript, Ajax 0 30.08.2012 17:16
Зависимый список vlad-minsk Microsoft Office Access 4 05.08.2010 11:32


09:11.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.