JavaScript or jQuery 获取option value值 以及文本内容的方法
1.html
<div class="form-group">
<label>保险公司</label>
<select class="form-control" id="testSelect">
<option value="平安">平安保险</option>
<option value="太平洋">太平洋保险</option>
<option value="平安">平安保险</option>
</select>
</div>
2.用JavaScript获取option 的值以及文本内容
/*JavaScript实现*/
var testSelect = document.getElementById("testSelect");
testSelect.onchange = function() { //当选项改变时触发
var valOption = this.options[this.selectedIndex].value; //获取option的value
alert(valOption);
var txtOption = this.options[this.selectedIndex].innerHTML; //获取option中间的文本
alert(txtOption);
}
实现效果：
达到了我们想要的效果
3.用jQuery获取option 的值以及文本内容(要引入jQuery库)
/*用jQuery实现*/
var oSelect = $("#testSelect");
oSelect.on('change',function(){
var checkText=$("#testSelect").find("option:selected").text(); //获取Select选择的Text
var checkValue=$("#testSelect").val();
console.log(checkText +"~~~~"+ checkValue);
});
运行效果：
当我任意选择一个option选项的时候 触发了change方法
4.全部代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
div{
width: 400px;
margin: 100px;
}
</style>
</head> <body>
<div class="form-group">
<label>保险公司</label>
<select class="form-control" id="testSelect">
<option value="平安">平安保险</option>
<option value="太平洋">太平洋保险</option>
<option value="平安">平安保险</option>
</select>
</div>
<script type="text/javascript">
/*JavaScript实现*/
var testSelect = document.getElementById("testSelect");
testSelect.onchange = function() { //当选项改变时触发
var valOption = this.options[this.selectedIndex].value; //获取option的value
alert(valOption);
var txtOption = this.options[this.selectedIndex].innerHTML; //获取option中间的文本
alert(txtOption);
} /*用jQuery实现*/
var oSelect = $("#testSelect");
oSelect.on('change',function(){
var checkText=$("#testSelect").find("option:selected").text(); //获取Select选择的Text
var checkValue=$("#testSelect").val();
console.log(checkText +"~~~~"+ checkValue);
});
</script>
</body> </html>
附：关于select + option 的相关知识点
1、jQuery获取Select元素，并选择的Text和Value:
$("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
var checkValue=$("#select_id").val(); //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
2、jQuery获取Select元素，并设置的 Text和Value:
$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
$("#select_id ").val(4); // 设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
3、jQuery添加/删除Select元素的Option项：
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
JavaScript or jQuery 获取option value值 以及文本内容的方法的更多相关文章
- jquery获取下拉列表的值和显示内容的方法
页面的下拉列表: 选择时间段: <select name="timespan" id="timespan" class="Wdate" ...
- JavaScript和JQuery获取DIV的值
1.设计源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- js和Jquery获取选中select值和文本
<body> <select name="PaymentType" style="width:110px" > <option v ...
- js&jquery 获取select下拉框的值、文本内容、自定义属性
js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...
- jquery获得option的值和对option进行操作 作者： 字体：[增加 减小] 类型：转载 时间：2013-12-13 我要评论
jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13我要评论 本文为大家介绍下jquery获得option的值和对option ...
- jquery获得option的值(示例)
jquery获得option的值和对option的操作. jQuery获取Select元素,并选择的Text和Value: 复制代码代码如下: $("#select_id").ch ...
- jquery获取元素索引值index()的例子
如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1 ...
- 【JavaScript与JQuery获取H2的内容】
撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...
- [转载]jquery获取元素索引值index()方法：
jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...
随机推荐
- js 防止连续点击
简称 js防连点 var flag = true; $(".yzm>span").click(function(){ if(!flag){ return fals ...
- js 控制选中文字
//脚本获取网页中选中文字 var word = document.selection.createRange().text; //获取选中文字所在的句子 var range = documen ...
- Designers, please follow the guidelines
Skype released big update for its iOS application last week. It brought in a major overhaul of not o ...
- 理解js中bind方法的使用
提到bind方法,估计大家还会想到call方法.apply方法:它们都是Function对象内建的方法,它们的第一个参数都是用来更改调用方法中this的指向.需要注意的是bind 是返回新的函数,以便 ...
- Flume -- Transfer one type of source to another type
Source within Flume is a kind of Server for outside client. Sink within Flume is a kind of client fo ...
- Climbing Stairs 爬楼梯问题，每次可以走1或2步，爬上n层楼梯总方法 （变相fibonacci）
You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...
- 【眼见为实】自己动手实践理解数据库REPEATABLE READ && Next-Key Lock
[REPEATABLE READ] 首先设置数据库隔离级别为可重复读(REPEATABLE READ): set global transaction isolation level REPEATAB ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
- oracle 找回DROP掉的表
select * from pan ; --有数据 drop table pan; --删除表 select * from pan ; --表或视图不存在 flashback t ...
- Python学习---Django重点之静态资源配置
[官网静态文件介绍] https://docs.djangoproject.com/en/1.10/howto/static-files/ # settings.py 配置静态资源文件 # STATI ...