使用JavaScript获取下拉列表中的选定值

如何使用JavaScript从下拉列表中获取所选值？

<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>

当前回答

由于代码的可能性、直观性以及id与name的使用，前面的答案仍有改进的空间。可以读取所选选项的三个数据——索引编号、值和文本。这个简单的跨浏览器代码可以完成以下三项：

<!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>

现场演示：http://jsbin.com/jiwena/1/edit?html输出

id应用于化妆。出于函数形式的目的，名称仍然有效，在HTML5中也是如此，应该仍然使用。最后，请注意在某些地方使用方括号和圆括号。正如前面所解释的，只有（旧版本的）Internet Explorer在所有地方都接受圆形。

2015-05-22 02:42:35

其他回答

初学者可能希望使用NAME属性而不是ID属性访问select中的值。我们知道所有表单元素都需要名称，甚至在获得id之前。

因此，我将添加getElementsByName（）解决方案，让新开发人员也能看到。

没有。表单元素的名称需要是唯一的，以便表单在发布后可以使用，但DOM可以允许多个元素共享名称。因此，如果可以，请考虑将ID添加到表单中，或者使用表单元素名称my_nth_select_named_x和my_nth_text_input_named_y显式添加ID。

使用getElementsByName的示例：

var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;

2011-03-09 03:32:02

在onchange函数中有一个简单的方法：

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

2014-04-16 20:52:40

您可以使用querySelector。

E.g.

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

2018-01-04 22:36:47

var selectedValue = document.getElementById("ddlViewBy").value;

2013-10-25 13:27:13

运行示例：

var e=document.getElementById（“ddlViewBy”）；var val1=e.options[e.selectedIndex].value；var txt=e.options[e.selectedIndex].text；document.write（“<br/>所选选项值：”+val1）；document.write（“<br/>所选选项文本：”+txt）；<select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”>test2</option><option value=“3”selected=“selected”>test3</option></选择>

注意：下拉列表更改时，值不会更改，如果您需要该功能，则需要执行onClick更改。

2017-08-02 13:19:01

使用JavaScript获取下拉列表中的选定值

推荐文章

最新文章

标签