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;

22条回答
地球回转人心会变
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>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <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>
        </select>
    </form>

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

    <script>
    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);
    }
     </script>
</body>
</html>

Live demo: http://jsbin.com/jiwena/1/edit?html,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.

查看更多
【Aperson】
5楼-- · 2019-08-21 05:29

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

event.target.options[event.target.selectedIndex].dataset.name

查看更多
Bombasti
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>
</select>

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

查看更多
Anthone
7楼-- · 2019-08-21 05:33

In 2015, in Firefox, the following also works.

e.options.selectedIndex

查看更多
登录 后发表回答