How to select multiple options in Listbox using Javascript?

[Anirvan Majumdar]

Hi,
I need to select multiple options in a listbox using javascript. If say, i have 3 values to be selected then using Form.listBox.selectedIndex only lets the last value to be selected. The other two remain un-selected.

Can anyone let me know how to circumvent this problem. Really appreciate any help.
Thanks!

[Eric Pascarello]

you need to loop the box to do it

var sel = document.forms[0].selectName;
for(var i=0; i<sel.options.length; i++){
  sel.options[i].selected = true;
}

Eric

[Anirvan Majumdar]

I have already tried the looping and selecting method, but see, if you've got say 3 options, then only the last one remains selected. The first two are not!

It somehow treats it the same as a dropdown. Like in a dropdown you cannot select more than one option at a time. Afterall, if you come to think of it, listbox is but the "select" tag having the attribute "size" > 1.

Anyone else got something which might work?

[Gregg Bolinger]

Originally posted by Anirvan Majumdar:
Afterall, if you come to think of it, listbox is but the "select" tag having the attribute "size" > 1.

Not exactly. You need to tell the select that it allows multiple selections.

[Anirvan Majumdar]

Dude....
see, the "HTML" code i wrote to declare the listbox was:

<select multiple name="xyz" size="3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

Now say you need to write a javascript method which would select and highlight 2,4 and 5 option, TOGETHER. How to go about that??

If you use say, ".selected" then only the last one is selected. If you use, ".selectedIndex" then also only the last one set remains highlighted.

My question is, IS THERE ANY WAY TO SELECT ALL OF THEM TOGETHER USING JAVASCRIPT? .... i hope i've mde it seem much clearer this time round atleast.

[Christophe Verré]

Please cool down. Everybody is trying to help.

function selectAll() {
var sel = document.getElementById("xyz");
sel.options[0].selected = 'true';
sel.options[3].selected = 'true';
sel.options[4].selected = 'true';
}
 
<select multiple id="xyz" size="3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
 
<input type="button" onclick="selectAll()" value="selectAll"/>

[Ram Gokul]

Eric's code snippet works fine for me .It does not deselct the previous selected ones.

[natasa jones]

i think this link is the answer to what you need..
http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_multiple

[Juan Carlos Marcano]

Anirvan Majumdar wrote:Dude....
see, the "HTML" code i wrote to declare the listbox was:

<select multiple name="xyz" size="3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

Now say you need to write a javascript method which would select and highlight 2,4 and 5 option, TOGETHER. How to go about that??

If you use say, ".selected" then only the last one is selected. If you use, ".selectedIndex" then also only the last one set remains highlighted.

My question is, IS THERE ANY WAY TO SELECT ALL OF THEM TOGETHER USING JAVASCRIPT? .... i hope i've mde it seem much clearer this time round atleast.

Use .setAttibute("Selected","selected"); its works.