Задать вопрос
Aligatro
@Aligatro
Turn food and coffee into software...

Реализация dropdown списка на select item'е?

Доброго времени суток, друзья =)

Давеча я тут столкнулся с небольшой проблемой реализации каталога товаров с помесью интернет-магазина но без самой корзины товаров. В общем суть в следующем....

На сайте имеется 3 карточки с товарами, каждая карточка имеет свою собственную линейку вкусов, каждый вкус имеет различную "разграммовку". Что-бы не загружать интерфейс сайта созданием более чем 96 карточек (3 линейки в кажой по 32 вкуса), было решено создать три линейки включив туда обычный список в котором я поместил всю вкусовую палитру. И все бы было отлично если бы не заказчик, который настаивает на том, что бы добавить разграмовку к каждому из доступных вариантов.

Как это реализовано сейчас
На сайте есть форма, в которую я инкапсулировал select, в selecte находится полный список со всеми необходимыми вкусами (пример на jsfiddle внизу). При выборе любого из них, массив формы заполняется значениями этих селекторов и передается на страницу обратной связи где он парсится и включается в поле "Ваш заказ". Человек вписывает свои контактные данные и отправляет письмо.

Суть вопроса
Проблема заключается в том, что заказчика не совсем устраивает что разграмовка выбирается не на лету, а разбита на подгруппы (в примере, хедеры (50g и 1kg). Потому хотелось бы узнать ваше мнение как логичней реализовать структуру в которой при hover на итеме будет инициироваться dropdown с граммами или выскальзывать аккардион с доступным весом.

Так как в логике самого "select" элемента такое реализовать скорее всего невозможно, а через например "li" список непонятно как передать данные формы (хотя может и можно, просто я с таким не сталкивался), то встает вопрос как бы это провернуть.

Пример на jsfiddle

Всем большое спасибо за помощь и потраченное время.
  • Вопрос задан
  • 473 просмотра
Подписаться 2 Оценить Комментировать
Решения вопроса 2
@RadialAdmin
Мне кажется надо больше предметную область описать чтобы могли посоветовать.
Ответ написан
hahenty
@hahenty
('•')
Можно высвечивать ползунок веса при выборе вкуса, прямо возле названия. Но ползунок гасить, если выбор снят.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Aligatro
@Aligatro Автор вопроса
Turn food and coffee into software...
Спасибо всем за помощь. Сергей, очень интересный вариант с ползунком, но к сожалению с реализацией мне будет очень тяжело справляться, так как на данном этапе я с js/JQuery не в братский отношениях а скорее в дружески-шапочных =)

Radial, когда линейка товаров пополнится, я обязательно буду реализовывать корзину товаров и сопутствующий ей функционал, разумеется что мудрить с костылями которые я делаю сейчас, вечно нельзя =)

Только-что набросал небольшой скриптик (не особо функциональный, надо разобраться в некоторых моментах) который на данном этапе решает описанную мною проблему. Если кому-то интересно - jsfiddle.net/k0r974b7 .

Еще раз всем спасибо =)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы