Get selected Item from the list with JS

Question

I have an html list with some items loaded. I am able to get the select list object using the following code:

var list = document.getElementById('ddlReason');

but I need help with figuring out how to detect which value has been chosen from the list.

Erik · Answer 1 · 2010-02-19T14:46:05.427

5

// Gets your select
var list = document.getElementById('ddlReason');

// Get the index of selected item, first item 0, second item 1 etc ...
var INDEX = list.selectedIndex;

// Viola you're done
alert(list[INDEX].value);

Edit (forgot .value).

You can also make that a bit more concise, but I wanted to make it readable so you could see what was going on. Shorter version:

var list = document.getElementById('ddlReason');
alert(list[list.selectedIndex].value);

edited Feb 19 '10 at 14:46

answered Feb 19 '10 at 14:35

Erik

20,526
8
45
76

Pretty sure that should be list.options[INDEX].value – Scott Saunders Feb 19 '10 at 14:48
In all browsers? I may be about to learn something. – Scott Saunders Feb 19 '10 at 15:53

score 4 · Answer 2 · edited Mar 05 '14 at 01:17

4

Actually you can do this

var list = document.getElementById('ddlReason').value;

and if you make an alert to list, you'll get the value of your select tag.

edited Mar 05 '14 at 01:17

Qantas 94 Heavy

15,750
31
68
83

answered Mar 05 '14 at 00:46

user3381402

41
1

score 2 · Answer 3 · answered Feb 19 '10 at 14:54

The list object will have a 'options' attribute that is an array of all the options in the list and a 'selectedIndex' attribute that contains the index of the selected item (or the first selected item if there are multiple). So you can do this:

var list = document.getElementById('ddlReason');
var selectedValue = list.options[list.selectedIndex];

Get selected Item from the list with JS

3 Answers3