How to get select value in javascript?

Question

Below is my code. I want the div to appear when it is selected, however, when I press submit, the word undefined appears instead of the words I want it to be.

When I use = instead of ==, e.g. if(age="toddlers"), the sentence "Bring to picnic" appears for all selected options.

Hence, I'm suspecting that it's because I'm not reading the value correctly. I tried

if (document.getElementsByTagName('option') == "toodlers")

and it's totally not working. I just started learning HTML, CSS and JS. I tried googling for a few hours and I still cannot fix it.

<form name="outing">
<select id="outing">
<option value="toddlers">Toddlers</option>
<option value="children">Children</option>
<option value="teenagers">Teenagers</option>
<option value="adults">Adults</option>
<option value="eldery">Elderly</option>
</select>
<input type="button" name="button" value="Go!" onClick="familyOuting();">
<input type="reset" value="Reset" onClick="window.location.reload()"/>
</form>

<script type="text/javascript">
    function familyOuting(){
        var age = document.getElementById("outing").selectedIndex;
        if(age=="toddlers"){
            var place = "Bring to picnic";
        }
        if(age=="children"){
            var place = "Bring to playground";
        }
        if(age=="teenagers"){
            var place = "Bring to swimming pool";
        }
        if(age=="adults"){
            var place = "Bring to dinner";
        }
        if(age=="elderly"){
            var place = "Bring to picnic";
        }
        document.getElementById("xxx").innerHTML=(place);
    }
</script>
<div id="xxx">

score 2 · Accepted Answer · answered Jul 29 '13 at 22:31

2

selectedIndex just returns an integer, hence it will never match your string,

Instead use value...

var age = document.getElementById("outing").value;

Also, in your comparison, use === for strict comparison of strings..

if(age==="toddlers"){
    var place = "Bring to picnic";
}

answered Jul 29 '13 at 22:31

Kylie

11,421
11
47
78

Or choose the _option_ with the _selectedIndex_ and get that's _value_. – Paul S. Jul 29 '13 at 22:32

v2b · Answer 2 · 2013-07-29T23:16:16.070

0

<select id="mySelect">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="pineapple">Pineapple</option>
  <option value="banana">Banana</option>
</select>

var x = document.getElementById("mySelect");
x.options[x.selectedIndex].value

edited Jul 29 '13 at 23:16

answered Jul 29 '13 at 22:43

v2b

1,436
9
15

1

This won't work if there are multiple `select` elements on the page. – Felix Kling Jul 29 '13 at 23:03
1

@FelixKling you are right. Edited it, this one should work :) – v2b Jul 29 '13 at 23:16

How to get select value in javascript?

2 Answers2