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

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

技术背景

在前端开发中，经常需要获取下拉列表（<select> 元素）中用户选择的值，以进行后续的数据处理或交互操作。这在表单提交、动态内容展示等场景中尤为常见。

实现步骤

1. 使用原生JavaScript

可以通过 document.getElementById 方法获取 <select> 元素，然后使用 selectedIndex 属性获取选中项的索引，进而获取选中项的值和文本。示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
<select id="ddlViewBy">
    <option value="1">test1</option>
    <option value="2" selected="selected">test2</option>
    <option value="3">test3</option>
</select>
<script>
    var e = document.getElementById("ddlViewBy");
    var value = e.value;
    var text = e.options[e.selectedIndex].text;
    console.log(value); // 输出选中项的值
    console.log(text);  // 输出选中项的文本
</script>

2. 使用jQuery

使用jQuery可以更简洁地获取选中项的值和文本。示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
<select id="ddlViewBy">
    <option value="1">test1</option>
    <option value="2" selected="selected">test2</option>
    <option value="3">test3</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var value = $("#ddlViewBy").val();
    var text = $("#ddlViewBy :selected").text();
    console.log(value); // 输出选中项的值
    console.log(text);  // 输出选中项的文本
</script>

3. 使用AngularJS

在AngularJS中，可以使用 ng-model 和 ng-options 指令来绑定下拉列表的选中项。示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>AngularJS下拉列表示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <select ng-model="selectItem" ng-options="item as item.text for item in items">
    </select>
    <p>Text: {{selectItem.text}}</p>
    <p>Value: {{selectItem.value}}</p>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.items = [
                { value: 'item_1_id', text: 'Item 1' },
                { value: 'item_2_id', text: 'Item 2' }
            ];
        });
    </script>
</body>
</html>

核心代码

原生JavaScript

1
2
3
var e = document.getElementById("ddlViewBy");
var value = e.value;
var text = e.options[e.selectedIndex].text;

jQuery

1
2
var value = $("#ddlViewBy").val();
var text = $("#ddlViewBy :selected").text();

AngularJS

1
2
3
4
5
6
7
8
9
10
11
// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [
    { value: 'item_1_id', text: 'Item 1' },
    { value: 'item_2_id', text: 'Item 2' }
];

最佳实践

  • 使用事件监听：如果需要在用户选择改变时实时获取选中值，可以使用 onchange 事件。示例代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
<select id="ddlViewBy" onchange="onChange()">
    <option value="1">test1</option>
    <option value="2" selected="selected">test2</option>
    <option value="3">test3</option>
</select>
<script>
    var e = document.getElementById("ddlViewBy");
    function onChange() {
        var value = e.value;
        var text = e.options[e.selectedIndex].text;
        console.log(value, text);
    }
</script>
  • 使用 querySelector：在现代浏览器中，可以使用 querySelector 结合 :checked 伪类来获取选中项。示例代码如下：
1
2
3
const opt = document.querySelector('#ddlViewBy option:checked');
console.log(opt.value, 'is the selected value');
console.log(opt.text, "is the selected option's text");

常见问题

1. Internet Explorer兼容性问题

在旧版本的Internet Explorer中，使用 e.options(e.selectedIndex).value 这种圆括号的写法可能会正常工作，但在其他浏览器中会报错。正确的写法是使用方括号 e.options[e.selectedIndex].value。

2. 多次获取元素问题

在某些代码中，可能会多次使用 document.getElementById 来获取同一个元素，这会影响性能。可以将元素引用存储在一个变量中，避免重复获取。例如：

1
2
3
var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
前端开发 > 表单处理
#前端开发 #JavaScript #jQuery #AngularJS #下拉列表取值
使用JavaScript获取下拉列表的选中值
https://119291.xyz/posts/2025-05-15.get-selected-value-in-dropdown-list-using-javascript/
作者
ww
发布于
2025年5月15日
许可协议