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. 《JavaWeb从入门到改行》多重外键关系在java中的处理方案

    目录:(点击红色方框展开子目录) 问题描述 无 项目案例说明 业务描述 数据库说明 项目源码及下载 无 问题描述 如上两图,数据库中各个表之间有很多的外键关系,其中业务关系是一个用户下有该用户的订单, ...

  2. OpenStack IceHouse 部署 - 4 - 计算节点部署

    Nova计算服务(计算节点)  参考 本页内容依照官方安装文档进行,具体参见Configure a compute node(nova service) 前置工作 数据库 由于我们在Nova(计算管理 ...

  3. 关于html 中form表单的内标签和使用

    表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...

  4. JavaWeb学习总结（六）：HttpServletRespone对象（二）

    一.HttpServletResponse常见应用——生成验证码 1.1.生成随机图片用作验证码 生成图片主要用到了一个BufferedImage类, 生成随机图片范例: package gacl.r ...

  5. Postman-Tests模块测试方法记录

    用Postman的时候大多数测试结果是可以用Tests模块的测试方法来代替人工检查的,测试方法本质上是JavaScript代码,我们可以通过运行测试用例(测试脚本是在发送请求之后并且从服务器接收到响应 ...

  6. Canvas学习：globalCompositeOperation详解

    在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面. 简单点讲,在Canvas中,把图像源和目标图像,通过Ca ...

  7. Oql实体转自定义对象

    返回单体: GroupEnvironmentDTO 是自定义的一个DTO, GroupEnvironmentEntity.MapToPOCO(dto);  把上述查出来的对象转换为DTO 返回实体集合 ...

  8. Python爬虫教程-10-UserAgent和常见浏览器UA值

    Python爬虫教程-10-UserAgent和常见浏览器UA值 有时候使用爬虫会被网站封了IP,所以需要去模拟浏览器,隐藏用户身份, UserAgent 包含浏览器信息,用户身份,设备系统信息 Us ...

  9. 基于bootstrap的模态框的comfirm弹窗

    完成的效果如下: html代码如下: <button id="btn">点击弹出弹框</button> <!-- 弹出框 --> <div ...

  10. vue从安装到初始化项目