Deselect selected options in select menu with multiple and optgroups
Would it not be simpler to just use?:
document.getElementById("ddBusinessCategory").value = "";
You don't need any loops. The selectedIndex property "Sets or returns the index of the selected <option>
element in the collection (starts at 0)".
Indexing starts at 0 so if you set it to -1 none are selected. (setting to 0 would leave the first option selected.)
function clearSelected(w){
document.getElementById(w).selectedIndex = -1;
}
<a href="#" onclick="clearSelected('ddBusinessCategory');">clear</a>
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