How to get selected value from Dropdown list in JavaScript

Question

How can you get the selected value from drop down list using JavaScript? I have tried the following but it does not work.

var sel = document.getElementById('select1');
var sv = sel.options[sel.selectedIndex].value;
alert(sv);

Can you paste your html content along with the javascript function used — AmGates, Jan 12 '12 at 09:16
Also see: http://stackoverflow.com/questions/1085801/how-to-get-selected-value-of-dropdownlist-using-javascript — Kangkan, Jan 12 '12 at 09:30
Check out this : http://javascriptstutorial.com/blog/selecting-dropdown-element-using-javascript-or-jquery — , May 25 '16 at 19:15

Kangkan · Accepted Answer · 2015-07-11T04:41:03.680

30

It is working fine with me.

I have the following HTML:

<div>
    <select id="select1">
        <option value="1">test1</option>
        <option value="2" selected="selected">test2</option>
        <option value="3">test3</option>
    </select>
    <br/>
    <button onClick="GetSelectedItem('select1');">Get Selected Item</button>
</div>

And the following JavaScript:

function GetSelectedItem(el)
{
    var e = document.getElementById(el);
    var strSel = "The Value is: " + e.options[e.selectedIndex].value + " and text is: " + e.options[e.selectedIndex].text;
    alert(strSel);
}

See that you are using the right id. In case you are using it with ASP.NET, the id changes when rendered.

edited Jul 11 '15 at 04:41

answered Jan 12 '12 at 09:14

Kangkan

15,267
10
70
113

1

Why not pass the select element into the function directly? Then you will not need to search for the select element by id. – Andrej Jul 10 '15 at 12:56
If you are invoking the script from the same element, passing the element is easy by using 'this'. However from other elements, as in this case, the good way will be to pass the element id and get the element in the function. I just updated my answer based on this. – Kangkan Jul 11 '15 at 04:41

score 4 · Answer 2 · answered Jan 12 '12 at 09:03

4

Direct value should work just fine:

var sv = sel.value;
alert(sv);

The only reason your code might fail is when there is no item selected, then the selectedIndex returns -1 and the code breaks.

answered Jan 12 '12 at 09:03

Shadow The GPT Wizard

66,030
26
140
208

see i have dropdown and i select one item from it and trying to display it using alert but not working alert is empty – Somi Meer Jan 12 '12 at 09:08
The code must be inside some event handler, just having it lying around won't help. Post more of your code and we'll see what you done wrong. – Shadow The GPT Wizard Jan 12 '12 at 09:19

score 2 · Answer 3 · answered Jan 02 '14 at 07:53

Hope it's working for you

 function GetSelectedItem()
 {
     var index = document.getElementById(select1).selectedIndex;

     alert("value =" + document.getElementById(select1).value); // show selected value
     alert("text =" + document.getElementById(select1).options[index].text); // show selected text 
 }

score 1 · Answer 4 · answered Jan 06 '17 at 04:59

Here is a simple example to get the selected value of dropdown in javascript

First we design the UI for dropdown

<div class="col-xs-12">
<select class="form-control" id="language">
    <option>---SELECT---</option>
    <option>JAVA</option>
    <option>C</option>
    <option>C++</option>
    <option>PERL</option>
</select>

Next we need to write script to get the selected item

<script type="text/javascript">
$(document).ready(function () {
    $('#language').change(function () {
        var doc = document.getElementById("language");
        alert("You selected " + doc.options[doc.selectedIndex].value);
    });
});

Now When change the dropdown the selected item will be alert.

score 0 · Answer 5 · edited May 23 '17 at 11:46

0

I would say change var sv = sel.options[sel.selectedIndex].value; to var sv = sel.options[sel.selectedIndex].text;

It worked for me. Directing you to where I found my solution Getting the selected value dropdown jstl

edited May 23 '17 at 11:46

Community

1
1

answered Sep 16 '13 at 20:43

mary_yaddah

1
2

score 0 · Answer 6 · answered Oct 29 '17 at 09:57

According to Html5 specs you should use -- element.options[e.selectedIndex].text

e.g. if you have select box like below :

<select id="selectbox1">
    <option value="1">First</option>
    <option value="2" selected="selected">Second</option>
    <option value="3">Third</option>
</select>
<br/>
<button onClick="GetItemValue('selectbox1');">Get Item</button>

you can get value using following script :

<script>
 function GetItemValue(q) {
   var e = document.getElementById(q);
   var selValue = e.options[e.selectedIndex].text ;
   alert("Selected Value: "+selValue);
 }
</script>

Tried and tested.

How to get selected value from Dropdown list in JavaScript

6 Answers6

Linked

Related