How to select from a LIST instead of DROPDOWN using jQuery (similiar to Digg's Submit New feature)

Question

Hi, I like to allow user to select from a list of categories and instead of a DROPDOWN, I like to do it similiar to Digg's Choose a Topic where they list the topics using LI tags and clicking on it selects it.

I like to restrict to just one selection for now. So clicking another selection deselects any previous selection.

How would I do it using jQuery and how would I get the value in PHP post processing?

You can see where I want to use it here http://www.photoidentify.com/submit.php

Thanks!

Answer 1

You could use a simple List, which is a select tag with the size-attribute set to 2 or more and the multiple-attribute set.

<select name="myListOfCategories" size="10" multiple="multiple">
   <option value="foo">bar</option>
</select>

That way you can incorporate it in a simple form and it looks and behaves like a list.

If you want more control over you list (like behavior), you have to create your own list handler in jQuery. For this, i would suggest working with classes.

jQuery('ul#Categories li').click(function(){
   if (jQuery(this).hasClass('selected')) {
      jQuery(this).removeClass('selected');
   } else {
      jQuery(this).addClass('selected');
   }
})

jQuery('form').submit(function(){
   //Unfortunately, I don't know a proper way to do this so... DIY! Any Help SO?
   var foobar = '';
   jQuery('ul#Categories li.selected').each(function(){
      foobar += jQuery(this).text() + '^';  //where '^' is a delimiter
   })
   jQuery('#someHiddenTextfield').val(foobar);
})

For CSS, i'd suggest

ul#Categories li.selected {
   background-color: blue;
   color: white;
}