How to toggle selection of an option in a multi-select with jQuery?

Question

I have a standard select multiple HTML Input field, for example:

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

As this is a multi-select, to select more than one value you have to hold the CTRL key and select any further elements. However what I want to achieve is, that:

1. Clicking an UNSELECTED option SELECTs it
2. Clicking a 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 un-selectable by clicking (ie. toggling of the select status).

I have not yet been able 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 implement this?

Answer 1

You may use the following snippet to achieve your desired effect

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

   if ($self.prop("selected"))
          $self.prop("selected", false);
   else
       $self.prop("selected", true);

   return false;
});

In older versions of jQuery, where prop() was not available:

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

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

   return false;
});

Answer 2

Javascript (without jquery):

var select = document.getElementById('mysel');
select.addEventListener('mousedown', function(e){
    var opt = e.target;
    if (opt.selected){
        opt.removeAttribute('selected');
        opt.selected = false;
    } else {
        opt.setAttribute('selected', '');
        opt.selected = true;
    }
    e.preventDefault();
});

I see most of the answers above are binding the event with the option instead of the select. If my select has 1000 options, then it will bind 1000 events, will it affect the performance?

Because of this I also decide not to bind my event in the option.