Return drop down menu value

Question

I have created a simple drop down menu using JavaScript where it displays the month of the year. Each option has a value. When using the onchange function to call another function count, I am unable to read the value of the drop down menu. Function count:

<script language="javascript" type="text/javascript">
    function count(){
        debugger;
        alert(lst_MonthDrop.value);
    }
</script>

Drop down menu:

<select name="lst_MonthDrop" 
        style="background-color:#FF9933; color:#FFF; border:none; border-radius:5px;" 
        onchange="count()">
    <option> When do you want to go?</option>
    <option value="2014-01-01">January</option>
    <option value="2014-02-01">Feburary</option>  
    <option value="2014-03-01">March</option>
    <option value="2014-04-01">April</option>
    <option value="2014-05-01">May</option>
    <option value="2014-06-01">June</option>
    <option value="2014-07-01">July</option>  
    <option value="2014-08-01">August</option>
    <option value="2014-09-01">September</option>
    <option value="2014-10-01">October</option>
    <option value="2014-11-01">November</option>
    <option value="2014-13-01">December</option>
</select>

Where do you define `lst_MonthDrop`? Since you are using `debugger`, I assume you know what the console is. Which error do you get? — Felix Kling, Dec 01 '13 at 21:49
put your script after your select element and add `id="lst_MonthDrop"` [look at jsFiddle](http://jsfiddle.net/GKDev/9SuB8/) — Givi, Dec 01 '13 at 21:54

bagonyi · Answer 1 · 2013-12-01T21:59:07.127

0

Give the select an ID: <select name="lst_MonthDrop" id="first-month"> and try again with this function:

function count(){
    var firstMonth = document.getElementById('first-month');
    // Value of the selected option
    alert(firstMonth.value);
    // Text of the selected option
    alert(firstMonth.options[firstMonth.selectedIndex].text);
}

edited Dec 01 '13 at 21:59

answered Dec 01 '13 at 21:52

bagonyi

3,258
2
22
20

The select doesn't have a value property. See my answer which uses `options.selectedIndex`. – Koen. Dec 01 '13 at 21:53
@Koen: [I disagree](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement#Properties): *"value - DOMString - The value of this form control, that is, of the first selected option."* – Felix Kling Dec 01 '13 at 21:54
Thanks, corrected - also because he needs the name of the month. – bagonyi Dec 01 '13 at 21:54
@bagonyi: Why do you think the OP wants the name of the month? – Felix Kling Dec 01 '13 at 21:57
You are right, misread that, edited to include both. – bagonyi Dec 01 '13 at 22:02

score 0 · Answer 2 · answered Dec 01 '13 at 21:52

0

Give your select an id and retrieve the content like:

var lst_MonthDrop = document.getElementById('lst_MonthDrop');
alert(lst_MonthDrop.options[lst_MonthDrop.options.selectedIndex].innerHTML);

answered Dec 01 '13 at 21:52

Koen.

25,449
7
83
78

score 0 · Accepted Answer · answered Dec 01 '13 at 21:58

JSFIDDLE

Modify the onchange to call count(this)

<select name="lst_MonthDrop" style="background-color:#FF9933; color:#FFF; border:none;   border-radius:5px;" onchange="count(this)">
    <option> When do you want to go?</option>
    <option value="2014-01-01">January</option>
    <option value="2014-02-01">Feburary</option>  
    <option value="2014-03-01">March</option>
    <option value="2014-04-01">April</option>
    <option value="2014-05-01">May</option>
    <option value="2014-06-01">June</option>
    <option value="2014-07-01">July</option>  
    <option value="2014-08-01">August</option>
    <option value="2014-09-01">September</option>
    <option value="2014-10-01">October</option>
    <option value="2014-11-01">November</option>
    <option value="2014-13-01">December</option>
</select>

Then give the count function an argument:

function count(s){
    alert(s.value);
}

When the onchange event is called it will pass a reference to the select element and you can then get the value from that reference.

Return drop down menu value

3 Answers3