使用JavaScript获取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值

使用JavaScript获取select元素选中的value和text的更多相关文章
- JQuery 获取select被选中的value和text
		html代码: <select name="test" > <option value="0">请选择</option> & ... 
- JavaScript 获取Select标签选中的项
		<select name="select1" id="select1" onchange=setInput()> <option value= ... 
- Javascript获取select的选中值和选中文本(转载)
		var obj = document.getElementById(”select_id”); //selectid var index = obj.selectedIndex; // 选中索引 va ... 
- jQuery获取Select元素
		jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ... 
- jQuery获取select元素选择器练习
		jQuery获取Select选择的Text和Value:语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ... 
- JavaScript获取select下拉框中的第一个值
		JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ... 
- 获取select标签选中状态 的label的值。
		<select name="procode" onchange="alert(this.options[this.selectedIndex].text)" ... 
- JavaScript获取Select下拉框Option的Value和Text值的方法
		Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ... 
- JavaScript获取html元素的实际宽度和高度
		一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ... 
随机推荐
- 换掉Tomcat默认图标
			将<Tomcat_home>下的/webapps/ROOT的favicon.ico替换成你自己的图标,名还得是这个名. 然后清除浏览器缓冲,webapp默认的小猫图标就被换掉了. 效果如下 ... 
- Java保存简单偏好的类
			该类利用Preferences保存文本,数字等简单数据,在Windows平台下,它就保存到了系统注册表中,而Linux中它存在于用户目录下的一个隐藏文件中. public class Pref{ ... 
- 【Hibernate一】概述及入门
			Hibernate学习框架: 1.基本部分 crud的操作 主键的生成机制 类型 持久化类 映射文件 *.hbm.xml 配置文件 hibe ... 
- synthesis-of-weak-property-only-allowed-in-arc-or-gc-mode ARC属性
			synthesis-of-weak-property-only-allowed-in-arc-or-gc-mode ARC属性 错误提示: 1:确认你的项目是 ARC环境: 2:如果 ARC下出现上面 ... 
- Unity Web前端研究
			原地址:http://blog.csdn.net/libeifs/article/details/7200630 开发环境 Window7 Unity3D 3.4.1 MB525defy Andro ... 
- MS SQL得到指定日期的当月月末
			MS SQL得到指定日期的当月月末 declare @ddate date ,,)) select @ddate --2016-01-31 declare @ddatetime datetime ,, ... 
- [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件
			本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ... 
- Redhat  5禁止IPv6
			Redhat 5禁止IPv6 IPv6还没有全然普及,可是安装完系统之后IPv6是有效的,在一定程度上影响网络性能,所以在我们在全然不使用IPv6的情况下.最好关闭IPv6.如今我们就在本文以完整的 ... 
- ADexplorer - 用来查看AD的工具
			ADExplorer是一款可以帮助查看和编辑数据库的软件.该数据库查看编辑器使用方便,操作简单,用户可通过该软件进行浏览AD数据库.自定义快速入口.查看对象属性.编辑权限.精确搜索等操作,还可以保存数 ... 
- iOS 获得通讯录中联系人的所有属性--b
			ABAddressBookRef addressBook = ABAddressBookCreate(); CFArrayRef results = ABAddressBookCopyArrayOfA ... 
