How to unselect an item in a select box?

Question

I have an easy question for you today. I have a select box that enables the user to select multiple items. Also, when the user returns to the page, he can see which items he selected and unselect them if necessary. The trouble is that when I try to unselect, the selection just turns gray; it does NOT unselect.

<select name="MySelect" multiple> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="selected">3</option> <option value="4">4</option> <option value="5">5</option> </select> 

So, when the element above renders to the page, I have no way to unselecting the option. The value is STILL getting passed to the form.

Any help?

Answer 1

You can deselect options in a multi-value select list by ctrl-clicking it.

Answer 2

You can use JS object to memorize the status of a row and click action on select (JQuery).

$('#yourselect').click( function(e){                 var i = this.selectedIndex;         if(this.options[i].selectedOld==true){             this.options[i].selected = false;             this.options[i].selectedOld = false;         }         else{             this.options[i].selectedOld = true;         }     });