JavaScript与jQuery获取Select选中值的方法

原生 JavaScript 实现方案

在不依赖任何第三方库的情况下，可以通过 DOM API 定位元素并访问其选项集合来实现。

第1步：获取 Select 对象

通过 document.getElementById 或其他选择器找到对应的下拉框元素。假设 HTML 结构如下：

<select id="testSelect">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
</select>

第2步：提取选中值与文本

利用 selectedIndex 属性获取当前选中项的索引号，再结合 options 数组分别获取对应的属性：

var obj = document.getElementById("testSelect"); // 定位 select 标签
var index = obj.selectedIndex;                  // 获取选中索引（从0开始）
var text = obj.options[index].text;             // 获取选中项显示的文本
var value = obj.options[index].value;           // 获取选中项的 value 属性

jQuery 实现方案

使用 jQuery 可以简化选择器语法，通过伪类选择器快速筛选状态为 “selected” 的选项。

第1步：选择器定位

使用 $('selectId option:selected') 组合选择器直接锁定目标项。

第2步：读取属性值

针对定位到的元素调用 .text() 或 .val() 方法，并通过 get(0) 还原 DOM 对象以获取索引：

// 方式一：链式调用
$('#testSelect option:selected').text(); // 获取选中文本
$('#testSelect option:selected').val();  // 获取选中值
$("#testSelect").get(0).selectedIndex;   // 获取选中索引

另外，也可先查找选项再进行取值，逻辑等效：

$("#testSelect").find("option:selected").text(); // 文本
$("#testSelect").find("option:selected").val();  // 值
$("#testSelect").find("option:selected").get(0).selectedIndex; // 索引

以上就是javascript获取select标签选中的值的详细内容，更多关于JavaScript/jQuery操作下拉框的资料请关注本站其它相关文章！