fromthemoon

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

Recommended Posts

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

Необходимо:

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

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

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

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
8 минут назад, Switch74 сказал:

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

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

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

Edited by fromthemoon

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

.t-product__option-select {

width: 180px !important;

}

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

Edited by fromthemoon

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites
6 минут назад, Switch74 сказал:

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

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

Share this post


Link to post
Share on other sites
5 часов назад, Switch74 сказал:

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
04.06.2019 в 10:13, Switch74 сказал:

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,551
    Total Members
    3,128
    Most Online
    Илья92
    Newest Member
    Илья92
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.