Как выбрать из списка вместо DROPDOWN с помощью jQuery (аналогично функции Digg «Отправить новый»)

Question

Мне нравится позволять пользователю выбирать из списка категорий, и вместо DROPDOWN мне нравится делать это подобно тому, как Digg выбирает тему, где они перечисляют темы, используя теги LI, и щелкая по ним, выбирают его.

Сейчас я хочу ограничиться одним выбором. Поэтому нажатие на другой выбор отменяет любой предыдущий выбор.

Как бы я сделал это с помощью jQuery и как бы получить значение в постобработке PHP?

Вы можете увидеть, где я хочу использовать это здесь http://www.photoidentify.com/submit.php

Спасибо!

Answer 1

Вы можете использовать простой список, который представляет собой тег select с атрибутом размера, равным 2 или более, и множеством атрибутов.

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

Таким образом, вы можете включить его в простой форме, и он будет выглядеть и вести себя как список.

Если вы хотите больше контролировать свой список (например, поведение), вам нужно создать свой собственный обработчик списка в jQuery. Для этого я бы предложил работать с классами.

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);
}) 

Для CSS я бы предложил

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