Как использовать элементы списка в качестве значения в форме?

Question

У меня есть клиент, который запрашивает функцию, которую мы сделали, когда большой список элементов сужен по типу (используя jquery, чтобы скрыть все, кроме тех, которые соответствуют выбору), и все это выглядит очень необычно ...

Теперь он просит меня добавить этот причудливый список «типов» (с их маленькими симпатичными значками и всплывающими описаниями) в форму, чтобы заменить выпадающий список выбора. Все значения одинаковы, но я не понимаю, как сделать щелчок одной из этих кнопок значением в форме.

Я подумал, что, возможно, каждый элемент может быть переключателем, поэтому его значение будет зависеть от того, какой переключатель отмечен (или выбранный значок), но я не знаю, как / если это будет сделано.

Любой совет был бы потрясающим. Спасибо.

Answer 1

Просто сделайте ваш раскрывающийся список невидимым и привязывайте события к элементам списка, а когда щелкнет один элемент, обновите раскрывающийся список.

JS пример

$('#items li').click(function(){
   $('#my_drop_down_box').value($(this).attr('rel'));
});

Пример HTML

<ul id="items">
  <li rl ="1">Item 1</li>
  <li rel="2">Item 2</li>
</ul>