原生js获取form表单select中option的value和text文本值

学无丿止境

已于 2022-07-23 15:42:06 修改

阅读量1.7k

点赞数 3

分类专栏： JavaScript前端文章标签： javascript servlet 前端

于 2022-07-23 15:40:03 首次发布

本文链接：https://blog.csdn.net/weixin_44716861/article/details/125948458

版权

JavaScript前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了一个JavaScript示例，演示如何在用户点击select元素时获取选中option的value和text值。通过添加点击事件监听器，获取到选中的option的索引，然后从中提取出对应的value和text信息，输出到控制台。这对于网页交互和数据处理具有实用价值。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击获取option的value和文本值</title>
</head>
<body>
    <form action="">
        <select id="select">
            <option value="demo1">测试数据1</option>
            <option value="demo2">测试数据2</option>
            <option value="demo3">测试数据3</option>
        </select>
        <div>2020</div>
    </form>
    <script>
        //获取select标签
        var select= document.querySelector('#select')
        //添加点击事件
        select.onclick = function () {
            //获取option标签的下标
            var ind = select.selectedIndex
            //获取option的value值
            var val = select[ind].value
             //获取option的text值(类似于测试数据1)
            var text= select[ind].text

            // 可以使用console.log()测试一下两个val和text的值
                console.log("===value值==="+val);         
                console.log("===text文本值==="+text);
              
        例子输出：===value值===demo1
                 ===text文本值===text

            
        }
    </script>
</body>
</html>