CODEWITHSUNDEEP
javascript
neojakey
neojakey

Reputation: 1663

Deselect selected options in select menu with multiple and optgroups

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

Upvotes: 42

Views: 122306

Answers (8)

Paul V
Paul V

Reputation: 359

Once you select the option elements from the DOM in an object however you do that, (I will pretend they all have a class name) just remove the attribute:

The Answer:

options = document.getElementsByClassName('optionsClassName');

for (let i = 0; i < options.length; i++) {
  options[i].removeAttribute('selected');
}

The Reason: HTML reads to see if a selected attribute exists. You can just have "selected" as an attribute without any value, and it will assume that option is selected. So, it works if you remove the attribute. Selecting will insert a new "selected" attribute. No worry.

Upvotes: 0

KWallace
KWallace

Reputation: 1700

Would it not be simpler to just use?:

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

Upvotes: 33

xaqxaqxaq
xaqxaqxaq

Reputation: 151

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>

Upvotes: 15

weblorin
weblorin

Reputation: 358

If you only want to loop through only the selected options, I suggest a while loop. 

var elements = document.getElementById("ddBusinessCategory").selectedOptions;
while (elements.length > 0)
{
    elements[0].selected = false;
}

The answer by Michel Sahli will not work when there are multiple selections, because as you progress through the for loop the value of elements.length changes.

That said, the .selectedOptions attribute is a bit troublesome (see Is selectedOptions broken or...?) so probably not worth whatever tiny savings you get by only looping through selected options.

Upvotes: 1

Michel Sahli
Michel Sahli

Reputation: 1089

You could simplify the code from Chase with the javascript property "selectedOptions"

HTML

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

JAVASCRIPT

function clearSelected(){
    var elements = document.getElementById("ddBusinessCategory").selectedOptions;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = false;
    }
  }

In this case you do a loop with the already selected options and not all options.

Upvotes: 9

astroanu
astroanu

Reputation: 4001

If you are using jquery you can do (i know the person who asked this is expecting a js answer but this might help someone)

$('#someid').find($('option')).attr('selected',false)

Upvotes: 5

Chase
Chase

Reputation: 29559

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

Upvotes: 52

Jan Sommer
Jan Sommer

Reputation: 3808

If you don't care about < IE8:

var checkedElements = document.querySelectorAll("#ddBusinessCategory :checked");

​for(var i = 0, length = checkedElements.length; i < length; i++) {
    checkedElements[i].selected = false;
}​

If you don't care about < IE9

Array.prototype.forEach.call(document.querySelectorAll("#ddBusinessCategory :checked"), function(el) { el.selected = false });

Use the answer from Chase if you want to support IE7, IE6, FF3 and earlier or feel it's easier to read.

Upvotes: 2

Related Questions