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. jQuery自适应-3D旋转轮播图

    3D旋转轮播图 本例源于(站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm) 其他相似示例(https://www.cnblogs.com/inc ...

  2. Android深入四大组件（四）Android8.0 根Activity启动过程（前篇）

    前言 在几个月前我写了Android深入四大组件(一)应用程序启动过程(前篇)和Android深入四大组件(一)应用程序启动过程(后篇)这两篇文章,它们都是基于Android 7.0,当我开始阅读An ...

  3. php中ip转int 并存储在mysql数据库

    遇到一个问题,于是百度一下. 得到最佳答案 http://blog.163.com/metlive@126/blog/static/1026327120104232330131/     如何将四个字 ...

  4. Oracle Merge Into的用法详解

    1.    MERGE INTO 的用途         MERGE INTO 是Oracle 9i以后才出现的新的功能.那这个功能 是什么呢?         简单来说,就是:“有则更新,无则插入” ...

  5. 爬虫入门之scrapy模拟登陆(十四)

    注意:模拟登陆时,必须保证settings.py里的COOKIES_ENABLED(Cookies中间件) 处于开启状态 COOKIES_ENABLED = True或# COOKIES_ENABLE ...

  6. 创建 In-app Billing 商品

    创建可供购买的 In-app Billing 商品 在你发布 In-app Billing 应用前,你需要在 Google Play 开发者控制台 定义可供购买的数字商品列表. 在 Google Pl ...

  7. Spring注解开发-全面解析常用注解使用方法之生命周期

    本文github位置:https://github.com/WillVi/Spring-Annotation/ 往期文章:Spring注解开发-全面解析常用注解使用方法之组件注册 bean生命周期 ​ ...

  8. CentOS7使用systemctl添加自定义服务

    一.简介 Centos7开机第一个程序从init完全换成了systemd这种启动方式,同centos 5 6已经是实质差别.systemd是靠管理unit的方式来控制开机服务,开机级别等功能. 在/u ...

  9. Chapter 1 Secondary Sorting:Introduction

    开始学习<数据算法:Hadoop/Spark大数据处理技巧>第1-5章,假期有空就摘抄下来,毕竟不是纸质的可以写写画画,感觉这样效果好点,当然复杂的东西仍然跳过.写博客越发成了做笔记的感觉 ...

  10. 5、Python，enumerate用法

    1.enumerate()是python的内置函数 2.对于一个可迭代(iterable)/可遍历的对象(如列表,字符串),enumerate将其组成一个索引序列,利用它可以同时获得索引和值 3.多用 ...