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. Bootstrap网格

    首先了解一下,什么是网格? 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中,它是一种用于 ...

  2. Ubuntu增加一个用户并给普通用户赋予root权限的方法

    1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #adduser tommy //添加一个名为tommy的用户#passwd tommy   //修改密码Changing pass ...

  3. Python 批量修改文件名并移动文件到指定目录

    # -*- coding: utf-8 -*- import os, sys,re,shutil from nt import chdir #读取中文路径 u'' path=u"D:\\zh ...

  4. vs code上配置Scala

    转自:https://www.cnblogs.com/steven-yang/p/5852988.html 百度的结果表达太奇怪,简单记一笔. 1.下载一个scala的压缩包,https://www. ...

  5. spring 与springmvc容器的关系

    spring容器是springmvc的父容器,而父容器是不能访问子容器中的东西,但子容器可以访问父容器的东西

  6. 微服务架构之spring cloud 介绍

    在当前的软件开发行业中,尤其是互联网,微服务是非常炽热的一个词语,市面上已经有一些成型的微服务框架来帮助开发者简化开发工作量,但spring cloud 绝对占有一席之地,不管你是否为java开发,大 ...

  7. python 网络 socket

    ---恢复内容开始--- 1.socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏 ...

  8. mybatis报错：org.apache.ibatis.builder.IncompleteElementException： Could not find parameter map

    异常信息:org.apache.ibatis.builder.IncompleteElementException: Could not find parameter map com.boco.fsm ...

  9. windows php5.4,5.6，7.X添加redis扩展

      首先下载php5.4对应版本的php_igbinary.dll,php_redis.dll扩展. 下载地址:http://download.csdn.net/detail/gejinbao357/ ...

  10. tomcat7环境

    官方下载页面:http://tomcat.apache.org/download-70.cgi 选择64-bit Windows zip下载 解压后,进入tomcat-7.0.73\bin目录,双击运 ...