Get selected value in dropdown list using JavaScri

2019-08-21 05:25发布

How do I get the selected value from a dropdown list using JavaScript?

I tried the methods below, but they all return the selected index instead of the value:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

2楼-- · 2019-08-21 05:28

The previous answers still leave room for improvement because of the possibilities, the intuitiveness of the code, and the use of id versus name. One can get a read-out of three data of a selected option -- its index number, its value and its text. This simple, cross-browser code does all three:

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);

Live demo:,output .

id should be used for make-up purposes. For functional form purposes, name is still valid, also in HTML5, and should still be used. Lastly, mind the use of square versus round brackets in certain places. As was explained before, only (older versions of) Internet Explorer will accept round ones in all places.

3楼-- · 2019-08-21 05:28

Here is a JavaScript code line:

var x = document.form1.list.value;

Assuming that the dropdown menu named list name="list" and included in a form with name attribute name="form1".

4楼-- · 2019-08-21 05:29

The only reason I can see that makes this code not work is if you're using IE7-, and forgot to specify the value attribute for your <option>-tags... Every other browser should convert what's inside open-close tags as the option value.

5楼-- · 2019-08-21 05:29

Here's an easy way to do it in an onchange function:[]

6楼-- · 2019-08-21 05:31

If you have a select element that looks like this:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>

Running this code:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Would make strUser be 2. If what you actually want is test2, then do this:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

Which would make strUser be test2

7楼-- · 2019-08-21 05:33

In 2015, in Firefox, the following also works.


登录 后发表回答