Question

I’ve got a client who’s asking for a feature we did where a large list of items is narrowed down by type (using jquery to hide all but the ones matching the selection) and it all looks very fancy…

Now he’s asking me to to add this fancy list of “types” (with their little pretty icons, and popping up descriptions) to a form to replace a select drop-down list. The values are all the same, but I don’t understand how I can make clicking one of these buttons a value in a form.

I thought maybe each item could be a radio button so it’s value would be dependant on which radio button is checked (or icon selected) but I’ve no idea how/if this would be done.

Any advice would be awesome. Thanks.

Answer 1

Just make your dropdown box invisible, and bind events to your list items, and when one item clicked update your dropdown box.

JS example

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

HTML Example

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