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.

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.

• javascript

• 1 Your <option> elements need closing tags as well: </option> – Nick Craver Commented Feb 26, 2010 at 18:36

5 Answers 5

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 = '-';

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>

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

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

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 = ...

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