Question

62

Deselect selected options in select menu with multiple and optgroups

rated 0 times [ 69] [ 7] / answers: 1 / hits: 110098 / 12 Years ago, tue, october 9, 2012, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lonnier

Add To Favorites

Follow

Total Points: 621

Total Questions: 113

Total Answers: 98

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

answered 12 Years ago myakylas · Accepted Answer

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