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

相关链接 ：http://www.jb51.net/article/44443.htm

JavaScript or jQuery 获取option value值 以及文本内容的方法的更多相关文章

  1. jquery获取下拉列表的值和显示内容的方法

    页面的下拉列表: 选择时间段: <select name="timespan" id="timespan" class="Wdate" ...

  2. JavaScript和JQuery获取DIV的值

    1.设计源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. js和Jquery获取选中select值和文本

    <body> <select name="PaymentType" style="width:110px" > <option v ...

  4. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  5. jquery获得option的值和对option进行操作 作者： 字体：[增加 减小] 类型：转载 时间：2013-12-13 我要评论

    jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13我要评论 本文为大家介绍下jquery获得option的值和对option ...

  6. jquery获得option的值(示例)

    jquery获得option的值和对option的操作. jQuery获取Select元素,并选择的Text和Value: 复制代码代码如下: $("#select_id").ch ...

  7. jquery获取元素索引值index()的例子

    如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1 ...

  8. 【JavaScript与JQuery获取H2的内容】

    撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...

  9. [转载]jquery获取元素索引值index()方法：

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

随机推荐

  1. 51NOD1847：奇怪的数学题

    传送门 Sol 设 \(f(d)\) 表示 \(d\) 所有约数中第二大的,\(low_d\) 表示 \(d\) 的最小质因子 \[f(d)=\frac{d}{low_d}\] 那么 \[\sum_{ ...

  2. LOJ572: Misaka Network 与求和

    传送门 假设 \(f^k(i)\) 就是 \(f(i)\) 莫比乌斯反演得到 \[ans=\sum_{i=1}^{N}\lfloor\frac{N}{i}\rfloor^2\sum_{d|i}f(d) ...

  3. RabbitMq、ActiveMq、ZeroMq、kafka各个消息中间件之间的区别

    MQ框架非常之多,比较流行的有RabbitMq.ActiveMq.ZeroMq.kafka.这几种MQ到底应该选择哪个?要根据自己项目的业务场景和需求. 第一部分:RabbitMQ,ActiveMq, ...

  4. background-position为什么会出现负值？

    上篇文章讲到了雪碧图,其中小机器人抖腿的动作设置了图片的background-position:-640px 循环到-1200px,那么这个数值是如何得出来的?下面具体分析一下如何计算backgrou ...

  5. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  6. Node.js 的安装

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 的运行环境,简单的说就是运行在服务端的 JavaScript.所以学起来还是比较容易接受的. Node.js 使用事件驱动 ...

  7. HiJson工具 && 火狐浏览器中的jsonHandle插件（以及乱码问题的解决）-->来转换json串的格式

    原文:http://blog.csdn.net/cjm2484836553/article/details/72453907 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] ...

  8. jQuery 插件封装的方法

    方式1.$.fn.xxx ==>针对元素添加方法: ;(function ($) { $.fn.m​​yPlugin = function () { //你自己的插件代码 }; })(jQuer ...

  9. Perl常用语法

    本文主要为了方便阅读.编写perl脚本而记录的常用的命令.语法. 一.条件判断语法 注意,数字 0, 字符串 '0' . "" , 空 list () , 和 undef 为 fa ...

  10. 面向对象进阶----->反射 getattr 和hasattr方法

    判断一个对象有没有血缘关系:isinstance() 里面写的是字类对象和父类名用来判断他们的关系 issubclass()是用来判断两个类是不是有继承的关系 ,括号内 写字类名和父类名  可以判断出 ...