Зависимый селект

[fromthemoon]

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

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

Необходимо, чтобы при выборе в первом селекте выводилась соответствующая optgroup'а. Каким образом можно скрыть не нужные виды покрытий во втором селекте, без изменения HTML-разметки, прям вот как есть. Заранее благодарю за помощь!

[Вадим Мошев]

Установите всем опшнГруппам свойство display: none по умолчанию.
Когда выбираете в первом селекте какое-то значение, вам надо найти опшнГрупп, у которого лейбл совпадает с выбранным значением в первом селекте. У найденного опшнГруппа ставите display: block, при этом запоминаете ссылку на этот групп в какой-то переменной. Когда выбираете другое значение, запомненному в переменной группу ставите снова дисплей нон, а потом повторяете все действия, что я описал.

[fromthemoon]

Сообщение от Вадим Мошев

Установите всем опшнГруппам свойство display: none по умолчанию.

Я мысленно понимаю как это должно в процессе работать, но к своему сожалению не имею навыков в написании кода, синтаксис Javascript для меня остается дремучим лесом. Понимаю, что следует изучить материал, но нужно сделать данную причуду быстрее, т.е. на изучение нет времени, потому брожу по форумам и терроризирую всех своими глупыми вопросами

[fromthemoon]

Сообщение от Вадим Мошев

Установите всем опшнГруппам свойство display: none по умолчанию.
Когда выбираете в первом селекте какое-то значение, вам надо найти опшнГрупп, у которого лейбл совпадает с выбранным значением в первом селекте. У найденного опшнГруппа ставите display: block, при этом запоминаете ссылку на этот групп в какой-то переменной. Когда выбираете другое значение, запомненному в переменной группу ставите снова дисплей нон, а потом повторяете все действия, что я описал.

https://jsfiddle.net/fromthemoon/c9jkrqbz/3/ - попытался сам написать, но теперь они показываются все разом, как это исправить?

[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]

Сообщение от 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');
});

Круто, спасибо, но пропали иконки, которые были там в виде изображений, простите за тупизм

[web-coder]

Сообщение от 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

[fromthemoon]

Сообщение от web-coder

Для этого есть специальные плагины. Например https://select2.org

К сожалению кастомы нельзя использовать, это конструктор и там вся разметка завязана на своих скриптах.

P.S. Одной и главной ошибкой было создание этого сайта на конструкторе

[web-coder]

Сообщение от fromthemoon

К сожалению кастомы нельзя использовать

Значит вставить иконки в список не получится.

[fromthemoon]

Сообщение от web-coder

Значит вставить иконки в список не получится.

Не совсем так - https://smirnovstolyar.ru/krovati, например, самая первая кровать