Deselect selected options in select menu with multiple and optgroups

Question

I want to be able to with a click of a link to be able to deselect all pre-selected options in a select menu with multiple select enable and with option groups.

Here is an example of the menu:

<select name="ddBusinessCategory" id="ddBusinessCategory" class="f1" style="width:280px;height:200px" multiple="multiple"> <option value="">Select One</option> <optgroup label="Abrasives" style="background:#F5F5F5;border-bottom:1px #EEE solid"> <option value="4" selected="selected">Abrasives</option> </optgroup> <optgroup label="Abstracters" style="background:#F5F5F5;border-bottom:1px #EEE solid"> <option value="5">Abstracters</option> </optgroup> <optgroup label="Abuse Information &amp; Treatment Centers" style="background:#F5F5F5;border-bottom:1px #EEE solid"> <option value="6" selected="selected">Abuse Information &amp; Treatment Centers</option> </optgroup> <optgroup label="Accountants" style="background:#F5F5F5;border-bottom:1px #EEE solid"> <option value="7">Accountants</option> <option value="2672">Certified Public Accountants - </option> <option value="2673">Public Accountants - </option> </optgroup> <optgroup label="Accounting Services" style="background:#F5F5F5;border-bottom:1px #EEE solid"> <option value="8">Accounting Services</option> </optgroup> <optgroup label="Acoustical Materials - Wholesale &amp; Manufacturers" style="background:#F5F5F5;border-bottom:1px #EEE solid"> <option value="9">Acoustical Materials - Wholesale &amp; Manufacturers</option> </optgroup> </select> 

You will see two are selected.. I want to be able to deselect these preselected ones.

DONT want to use jquery, just want to use javascript

Many thanks for your assistance.

neojakey

Answer 1

The following function should loop through all the options and unselect them.

HTML

<a href="#" onclick="clearSelected();">clear</a> 

JAVASCRIPT

 function clearSelected(){     var elements = document.getElementById("ddBusinessCategory").options;      for(var i = 0; i < elements.length; i++){       elements[i].selected = false;     }   } 

EDIT:

I don't endorse putting the event handler directly on the element. If you have the option, give the element some type of id/name and bind the event handler in your JavaScript code.

EXAMPLE

Answer 2

Would it not be simpler to just use?:

document.getElementById("ddBusinessCategory").value = "";