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. python，tensorflow线性回归Django网页显示Gif动态图

    1.工程组成 2.urls.py """Django_machine_learning_linear_regression URL Configuration The ` ...

  2. UOJ#54 BZOJ3434 [WC2014]时空穿梭

    题目描述 小 X 驾驶着他的飞船准备穿梭过一个 \(n\) 维空间,这个空间里每个点的坐标可以用 \(n\) 个实数表示,即 \((x_1,x_2,\dots,x_n)\). 为了穿过这个空间,小 X ...

  3. display:table和display:table-cell的妙用

    display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到, ...

  4. PHP 中提示undefined index如何解决(多种方法)

    PHP 中提示undefined index如何解决(多种方法) 这篇文章主要介绍了PHP 中提示undefined index如何解决(多种方法)的相关资料,需要的朋友可以参考下 一.相关信息 平时 ...

  5. jquery 之事件 方法

    一.jquery事件 1 blur()       触发.或将函数绑定到指定元素的 blur 事件 2 change()     触发.或将函数绑定到指定元素的 change 事件 3 click() ...

  6. ZOJ Problem Set – 2321 Filling Out the Team

    Time Limit: 2 Seconds      Memory Limit: 65536 KB Over the years, the people of the great city of Pi ...

  7. MySQL经典错误

    本文目录: Top 1:Too many connections(连接数过多,导致连接不上数据库,业务无法正常进行)Top 2:(主从复制报错类型)Top 3:MySQL安装过程中的报错Top 4:数 ...

  8. PHPStorm/webstorm/PyCharm tips

    phpstorm对于使用PHP开发web的人员来说,是一个非常不错的编辑开发IDE,以前用过sublime,但是相比于storm,sublime在浏览legacy代码,类代码编辑方面明显要逊色不少.同 ...

  9. [tools]excel转lua的python实现

    time:2015/04/13 描述:需要将excel表格内容转成lua,并且作为工具使用,能够批量转换 步骤: (1)文章[1]已经做了大部分的内容,而且也已经能够使用了 (2)根据自己新的需求: ...

  10. 【转】15个必须知道的chrome开发者技巧

    一.快速切换文件 如果你使用过sublime text,那么你可能不习惯没有Go to anything这个功能的覆盖.你会很高兴听到chrome开发者功能也有这个功能,当DevTools被打开的时候 ...