Set option value with getElementsByName()

Question

Having this fieldset:

<fieldset>
    <legend>[*death]</legend>
    <select name=death  style="width: 120px">
        <option value=Dead>[*died]
        <option value=NotDead>[*alive]
        <option value="" selected>-
    </select>
</fieldset>

i want to set the [2].value to "-".

i have tried without any success:

document.getElementsByName('death')[2].checked = 'true';
document.getElementsByName('death')[2].value = '-';

Same kind of code works fine for radio boxes, checked boxes or other inputs in the form. How to do it with the option select (which is not an input)?

Thanks

[EDIT] of course, appropriate fieldset is:

<fieldset>
  <legend>[*death]</legend>
    <select name="death"  style="width: 120px">
      <option value="Dead">[*died]</option>
      <option value="NotDead">[*alive]</option>
      <option value="" selected>-</option>
    </select>
</fieldset>

thanks.

score 9 · Accepted Answer · answered Feb 26 '10 at 18:39

9

It's a little bit unclear what you're asking. Are you simply asking to make the option at index 2 selected?

document.getElementsByName('death')[0].selectedIndex = 2;

Or, are you asking to change the value of option at index 2?

var d = document.getElementsByName('death')[0];
d.options[2].value = '-';

answered Feb 26 '10 at 18:39

moribvndvs

42,191
11
135
149

document.getElementsByName('death')[0].selectedIndex = 2; is fine. Thanks – volvox Feb 26 '10 at 18:55

brabster · Answer 2 · 2010-02-26T18:47:27.860

You need to manipulate the selected property of your select object, try

document.getElementsByName('death')[0].selectedIndex = 1;

In english, this reads "set the selected option to the second option in the first element in the document with name 'death'".

Fixing your HTML might make the results of your javascript more predictable. Close your tags, quote your attribute values, as follows:

<fieldset>
  <legend>[*death]</legend>
    <select name="death"  style="width: 120px">
      <option value="Dead">[*died]</option>
      <option value="NotDead">[*alive]</option>
      <option value="" selected>-</option>
    </select>
</fieldset>

Thanks for the fixing. Your suggestion is also fine. – volvox Feb 26 '10 at 19:01 — volvox, Feb 26 '10 at 19:01

score 1 · Answer 3 · answered Feb 26 '10 at 18:41

1

you can do this using jQuery... it's easy...

j("#death").val(2)

answered Feb 26 '10 at 18:41

Ju Nogueira

8,435
2
29
33

using a javascript framework is definitely better. i'd like to point out, however, that his HTML is using a name and not an ID. – moribvndvs Feb 26 '10 at 18:43
How if no ID (or, i could actually add an ID) – volvox Feb 26 '10 at 20:58

kevingessner · Answer 4 · 2012-12-26T05:10:57.117

0

document.getElementsByName('death')[2] returns the third element named death - but you only have one element with that name. Instead, you want the first element named death (i.e. the one at index 0), and then you want its third option: document.getElementsByName('death')[0].options[2].value = ...

edited Dec 26 '12 at 05:10

answered Feb 26 '10 at 18:40

kevingessner

18,559
5
43
63

score 0 · Answer 5 · answered Sep 16 '16 at 19:17

Here's an alert example of how to access your specific option values with getElementsByName

alert(document.getElementsByName('death')[0].options[0].value); // will return Dead
alert(document.getElementsByName('death')[0].options[1].value); // will return NotDead

Set option value with getElementsByName()

5 Answers5

Linked