使用原生JS获取select元素选中的value和text值
更新时间：2022年03月02日 14:30:48 作者：.NET开发菜鸟
这篇文章介绍了使用原生JS获取select元素选中的value和text值，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
示例代码如下(js直接写在了html里面，没有写在一个单独的外部文件中)：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>select元素</title>
</head>
<body id="bodyform">
<select id="month">
<option value="01">January</option>
<option value="02">February</option>
<option value="03" selected="selected">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<div>
<input type="button" onclick="showValue()" value="显示Value值"></input>
<input type="button" onclick="showText()" value="显示Text值"></input>
</div>
</body>
<script type="text/javascript">
function showValue(){
/*获取select选中的对象的value*/
var select=document.querySelector("#month");
alert("Value值:"+select.value);
}
function showText(){
/*获取select选中的对象的text*/
var select=document.querySelector("#month");
alert("Text值:"+select.options[select.selectedIndex].text);
}
</script>
</html>界面：
运行效果如下：
点击显示Value值
点击显示Text值
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代2016-12-12
这篇文章主要为大家介绍了js基石系列学习之错误类型示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了JavaScript中的this关键字使用,是JavaScript入门学习中的基础知识,需要的朋友可以参考下2015-08-08
本篇文章小编将为大家介绍，js中 关于undefined和null的区别，有需要的朋友可以参考一下2013-04-04
本节主要介绍了js 创建对象的区别，不同的赋值方式，导致的结果也不一样，感兴趣的朋友可以了解下2014-07-07
Javascript中的Split使用方法与技巧...2007-03-03
下面小编就为大家带来一篇老生常谈js数据类型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
下面小编就为大家带来一篇老生常谈JavaScript数组的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
JavaScript中prototype为对象添加属性的误区介绍
prototype为对象添加属性的的过程中有些误区，在本文将为大家详细介绍下，感兴趣的朋友可不要错过2013-10-10
方式1 是典型的函数声明(Function declarations)。方式2 是函数表达式(Function expressions)，未必所有人都知道其区别，内部原理2013-11-11
最新评论