Prototype. How to undo a selected value from the drop-down list

Question

How to deselect a dropdown using Prototype.

WITH

<select id="mylist" MULTIPLE > <option value="val-1">Value 1</option> <option value="val-2" SELECTED>Value 2</option> <option value="val-3">Value 3</option> </select> 

For

 <select id="mylist" MULTIPLE > <option value="val-1">Value 1</option> <option value="val-2">Value 2</option> <option value="val-3">Value 3</option> </select> 

Thanks for any help in advance.

Answer 1

I found that the following code worked well:

 var options = $$('select#mylist option'); var len = options.length; for (var i = 0; i < len; i++) { options[i].selected = false; } 

Answer 2

I'm not sure how to do this in a prototype, but I can do it in JavaScript.

For regular selection, set yourSelectElement.selectedIndex = -1 .

For multiple selection, you can simply ctrl + click on the selected item, but you can also do it programmatically. See Link.

http://jsfiddle.net/kaleb/WxJ9R/

Answer 3

You cannot: you need to add an empty option

 <option></option> 

and then

 $$("#mylist option[selected]")[0].selected = false; $$("#mylist option")[0].selected = true; 

Answer 4

If you select the second list ...

 Event.observe('secondlist', 'change', function(){ if (this.selectedIndex >= 0) $$('#mylist option[selected]').invoke('writeAttribute', 'selected', false); });