In express I am rendering a handlebar template populating a form with values.

To populate my select options I set the "value" property of my select node like so:

<select class="inputField" name="gender" value="female">
    <option value="male">Männlich</option>
    <option value="female">Weiblich</option>
</select>

Visually the male option is selected though. Can anyone explain why this is happening?

EDIT 1:

I am aware of the selected property, but it makes stuff more plicated when templating, so I'd rather pass down the selected value.

But to be more precise on my original question:

why does this work then:

var genderEl = document.getElementById('genderSelect');
    genderEl.value = "female";

In express I am rendering a handlebar template populating a form with values.

To populate my select options I set the "value" property of my select node like so:

<select class="inputField" name="gender" value="female">
    <option value="male">Männlich</option>
    <option value="female">Weiblich</option>
</select>

Visually the male option is selected though. Can anyone explain why this is happening?

EDIT 1:

I am aware of the selected property, but it makes stuff more plicated when templating, so I'd rather pass down the selected value.

But to be more precise on my original question:

why does this work then:

var genderEl = document.getElementById('genderSelect');
    genderEl.value = "female";

• javascript
• html

Share Improve this question Follow edited Aug 20, 2015 at 23:15 Max Bumaye asked Aug 20, 2015 at 23:06 Max BumayeMax Bumaye 1,0071010 silver badges1818 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

the correct way to pre-select an option in a select input is:

<select class="inputField" name="gender">
    <option value="male">Männlich</option>
    <option value="female" selected>Weiblich</option>
</select>

if you are using xhtml or html4, you should change selected for selected="selected"

Why does this work then: var genderEl = document.getElementById('genderSelect'); genderEl.value = "female";

Simply because DOM uses different properties ;-)

To answer your original question: There is no value attribute for selects in HTML, but there is one in DOM. So you have to stick with the selected attribute, if you want a pure HTML solution.

That's not how selects work. You need to use the selected attribute on an option, like this:

<select class="inputField" name="gender">
    <option value="male">Männlich</option>
    <option value="female" selected="1">Weiblich</option>
</select>

I think that you are looking for something like this:

<select class="inputField" name="gender">
    <option value="male">Männlich</option>
    <option value="female" selected>Weiblich</option>
</select>

To select a option use:

<option value="female" selected="selected">Weiblich</option>

see