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

Tags:

Javascript