Доброго времени суток, друзья =)
Давеча я тут столкнулся с небольшой проблемой реализации каталога товаров с помесью интернет-магазина но без самой корзины товаров. В общем суть в следующем....
На сайте имеется 3 карточки с товарами, каждая карточка имеет свою собственную линейку вкусов, каждый вкус имеет различную "разграммовку". Что-бы не загружать интерфейс сайта созданием более чем 96 карточек (3 линейки в кажой по 32 вкуса), было решено создать три линейки включив туда обычный список в котором я поместил всю вкусовую палитру. И все бы было отлично если бы не заказчик, который настаивает на том, что бы добавить разграмовку к каждому из доступных вариантов.
Как это реализовано сейчас
На сайте есть форма, в которую я инкапсулировал select, в selecte находится полный список со всеми необходимыми вкусами (пример на jsfiddle внизу). При выборе любого из них, массив формы заполняется значениями этих селекторов и передается на страницу обратной связи где он парсится и включается в поле "Ваш заказ". Человек вписывает свои контактные данные и отправляет письмо.
Суть вопроса
Проблема заключается в том, что заказчика не совсем устраивает что разграмовка выбирается не на лету, а разбита на подгруппы (в примере, хедеры (50g и 1kg). Потому хотелось бы узнать ваше мнение как логичней реализовать структуру в которой при hover на итеме будет инициироваться dropdown с граммами или выскальзывать аккардион с доступным весом.
Так как в логике самого "select" элемента такое реализовать скорее всего невозможно, а через например "li" список непонятно как передать данные формы (хотя может и можно, просто я с таким не сталкивался), то встает вопрос как бы это провернуть.
Пример на jsfiddle
Всем большое спасибо за помощь и потраченное время.
