HTML Select-Multiple Input Field = How to select/deselect (=toggle) a value with JQuery?

Question

Hallo Experts,

I have a standard "select multiple" HTML Input field als below:

<select multiple="multiple" size="5" id="mysel" name="countries"> 
 <option value="2">Afghanistan</option> 
 <option value="4">Aland</option> 
</select>

As this is a "multiselect", to select more than one value you have to hold the CTRL Key and selct any further elements.

==>However what I want to achieve is, that:

1. Klicking and UNSELECTED option SELECTs it
2. Klicking an SELECTED option UNSELECTS it.

= The idea is to avoid having to press the CTRL Key and change the "usage-semantics" of this input field. Elements should only be selectable and unselectable by clicking (=Toggling of the select status)

However I didnt menage so far to implement this. The pseudo-code should look something like this.

1. Catch a Click event.
2. Check if the element that was clicked was unselected, then select it
3. Or if the element that was clicked was selected, then unselect it.

How should I implment this?

Thank you very much!! Tim

Answer 1

You're right in wanting to change the default behaviour of select multiple input fields. They tend to contribute negatively towards user experience as the purpose is not clearly conveyed and users' may not understand how to use them correctly.

Re-purposing a multi-select box isn't right either. If you are considering using select multiple, then you might want to refactor your design. Perhaps you can use checkboxes instead?

Here's an article on the topic: http://www.ryancramer.com/journal/entries/select_multiple/

Answer 2

You may use the following snippet to achieve your desired effect

$("select[multiple] option").mousedown(function(){
   var $self = $(this);

   if ($self.attr("selected"))
          $self.attr("selected", "");
   else
       $self.attr("selected", "selected");

   return false;
});

Example: http://jsbin.com/idofa

Answer 3

Do you have a solution that works in IE6 ? :)