Зависимый selectы с иконками в одном из них

[fromthemoon 0]

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

Необходимо:

1) Заменить два события - mouseleave и mouseover на что-то вроде change или click, чтобы при выборе не было этих подергиваний.

2) При выборе первого select во втором select скрывается группа option, которые не были выбраны, т.е. Без покрытия - выводится пустая строчка, Морилка - выводятся значения соответствующие морилке

Сайт состряпан на конструкторе Tilda, страница с проблемой - https://smirnovstolyar.ru/krovati

PS: понимаю, что это плохая идея для создания сайта, так как лучше делать всё с нуля, в будущем это и планируется сделать, но для первого времени необходимо доделать, что есть на данный момент. Прошу помочь

 

[Switch74 352]

1. чтобы не было подергиваний сделайте размеры списков одинаковыми
2. у вас вроде фильтруется второй список в зависимости от того что выбрано в первом, цвет только не фиксируется

[fromthemoon 0]

8 минут назад, Switch74 сказал:

1. чтобы не было подергиваний сделайте размеры списков одинаковыми
2. у вас вроде фильтруется второй список в зависимости от того что выбрано в первом, цвет только не фиксируется

this.size = multiple; вместо this.size = 1; выглядит неплохо, но в процессе перемещения мыши из области селекта, селект не сворачивается обратно, потому и хотел убрать вовсе такое поведение на обычный клик по селекту->дроп цветов и его выбор

Цвет фиксировать не нужно, он показывается человеку, чтобы хоть какое-то представление иметь о продукции, было бы круто конечно закинуть всё это дело в форму корзины, но думаю что слишком громозко всё выйдет и страница будет грузиться 3 года

Edited June 3 by fromthemoon

[Switch74 352]

я имел ввиду width укажите им строгую ширину, чтобы они не меняли свой размер под содержимое

[fromthemoon 0]

так это уже прописано - 

.t-product__option-select {

width: 180px !important;

}

Это было сделано ещё до изменения this.size = 1 на multiple

Edited June 3 by fromthemoon

[Switch74 352]

я про это говорил
https://jsfiddle.net/48t9vk7j/

если вам не нравится что когда выпадающий список раскрывается, то он отталкивает все что ниже него, то тут может помочь position:absolute для списков

вообще вам можно было бы сделать свой простой список, на вроде
https://jsfiddle.net/negt2p6c/

[fromthemoon 0]

6 минут назад, Switch74 сказал:

вообще вам можно было бы сделать свой простой список, на вроде
https://jsfiddle.net/negt2p6c/

Вот это очень круто выглядит, прям то, что нужно, попробую прикрутить, спасибо

[fromthemoon 0]

5 часов назад, Switch74 сказал:

https://jsfiddle.net/negt2p6c/

Простите, забыл сказать, что изменять структуру html нельзя, так как это конструктор и на нём завязаны его собственные скрипты. 

var affect_select = undefined;  в песочнице пишет, что нет необходимости инициализировать такую переменную как undefined

[Switch74 352]

ну вы можете попробовать использовать ту структуру, которая у вас есть, использую принцип в моем примере

[fromthemoon 0]

Сложно это,  когда мат.части не знаешь пытаться прикрутить всё это дело на свой велосипед, но одназначно большое спасибо вам за помощь!

[fromthemoon 0]

04.06.2019 в 10:13, Switch74 сказал:

ну вы можете попробовать использовать ту структуру, которая у вас есть, использую принцип в моем примере

https://jsfiddle.net/fromthemoon/xrkudpbz/ много раз бился, чтобы переделать под ваш пример, ничего не вышло толком(( помогите плз

[Switch74 352]

значит остается использовать готовые решения как они есть...
или учиться

[fromthemoon 0]

Готовые решения не подходят, а на обучение уйдет достаточно много времени, что в данный момент невозможно. Спасибо я вас понял. Тему можно закрыть.