HTML select option showing "wrong" value

Question

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 complicated 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";

score 3 · Answer 1 · answered Aug 20 '15 at 23:12

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"

Sebastian S · Answer 2 · 2015-08-20T23:26:43.720

2

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.

edited Aug 20 '15 at 23:26

answered Aug 20 '15 at 23:21

Sebastian S

4,420
4
34
63

score 1 · Accepted Answer · answered Aug 20 '15 at 23:10

1

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>

answered Aug 20 '15 at 23:10

elixenide

44,308
16
74
100

http://stackoverflow.com/questions/78932/how-do-i-programatically-set-the-value-of-a-select-box-element-using-javascript – Max Bumaye Aug 20 '15 at 23:11
I assumed it does, since programatically setting the value of the "select"-node with javascript results working – Max Bumaye Aug 20 '15 at 23:12
@MaxBumaye Well, HTML and JavaScript don't always work the same way. :) – elixenide Aug 20 '15 at 23:13
Okay, I see the javascript part el.value = 'female' does'nt affect the property of the select field. Don't get me wrong, but is'nt the DOM in someway responsible for showing evidence of the Result? – Max Bumaye Aug 20 '15 at 23:20
@MaxBumaye the DOM itself doesn't do much of anything; it has to be acted on by JavaScript, which is frustratingly inconsistent. Most modern browsers will update the DOM correctly, but there are still lots of surprises out there. – elixenide Aug 20 '15 at 23:22
So it's just a lack of consistency if I understand correctly? – Max Bumaye Aug 20 '15 at 23:25
@MaxBumaye you got it. – elixenide Aug 20 '15 at 23:26
Thanks :) This is what I needed – Max Bumaye Aug 20 '15 at 23:26

score 1 · Answer 4 · answered Aug 20 '15 at 23:14

1

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>

answered Aug 20 '15 at 23:14

Carlos Galan

76
5

score 0 · Answer 5 · edited May 23 '17 at 12:14

0

To select a option use:

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

see

edited May 23 '17 at 12:14

Community

1
1

answered Aug 20 '15 at 23:12

cocoseis

1,443
1
13
35

HTML select option showing "wrong" value

5 Answers5