Javascript: Change <select ..> options from java script

Question

I have a form which looks like below, where the user can select multiple options. I am trying to do the same thing (when the page regenerates) from javascript. I am not sure where I am going wrong. Could someone correct me?

            <form name="myForm">
                <select name="numSel[]" size="2" multiple="multiple">
                  <option value="ONE">ONE</option>                     
                  <option value="TWO">TWO</option>
                  <option value="THREE">THREE</option>
                  <option value="FOUR">FOUR</option>
                </select>
            </form>

This is the javascript code that I am trying (trying to select ONE and THREE):

                document.myForm.numSel.options[1].selected =  true;
                document.myForm.numSel.options[3].selected =  true;

Any ideas?

Edit: Syntax corrected (not actually in the code). I intend to generate the javascript statements in PHP and the numSel[] is needed for it to work. So, in this scenario, how do I change the code?

Thanks.

What do you exactly want to do? Select one and others get selected too? Be more specific — MayTheSchwartzBeWithYou
– MayTheSchwartzBeWithYou, Commented Aug 18, 2012 at 8:25

khomyakoshka · Accepted Answer · 2012-08-18 08:41:11Z

2

Change your JS code this way:

document.forms["myForm"].elements["numSel[]"].options[1].selected =  true;
document.forms["myForm"].elements["numSel[]"].options[3].selected =  true;

And correct the closing tag </select>.

answered Aug 18, 2012 at 8:41

khomyakoshka

1,2798 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jamie Treworgy · Accepted Answer · 2012-08-18 08:39:02Z

2

name="numSel[]" does not match the name in your script. Change that to just numSel and it works:

<select name="numSel" size="2" multiple="multiple">

http://jsfiddle.net/m5GJW/

.. or alternatively target it by the name "numSel[]"

document.myForm["numSel[]"].options[1].selected =  true;
document.myForm["numSel[]"].options[3].selected =  true;

http://jsfiddle.net/x3rGb/

edited Aug 18, 2012 at 8:39

answered Aug 18, 2012 at 8:23

Jamie Treworgy

24.4k9 gold badges81 silver badges120 bronze badges

2 Comments

SEU Over a year ago

Thanks. The 2nd solution worked and thanks for jsfiddle. Didn't know about it.

Jamie Treworgy Over a year ago

It's a great tool for testing javascript. Another similar/slightly more minimalist one, also useful, is jsbin.com. Mostly personal preference. (Strangely, though, jsbin is down right now)

Collectives™ on Stack Overflow

Javascript: Change <select ..> options from java script

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related