JavaScript或jQuery 获取option value值方法解析


Posted in jQuery onMay 12, 2020

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);
      }

实现效果:

JavaScript或jQuery 获取option value值方法解析

JavaScript或jQuery 获取option value值方法解析

达到了我们想要的效果

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方法

JavaScript或jQuery 获取option value值方法解析

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" rel="external nofollow" />
    <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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 #jQuery
基于JQuery实现页面定时弹出广告
May 08 #jQuery
JQuery复选框全选效果如何实现
May 08 #jQuery
JQuery省市联动效果实现过程详解
May 08 #jQuery
jquery实现手风琴案例
May 04 #jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
You might like
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
vue debug 二种方法
2018/09/16 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
财务务虚会发言材料
2014/10/20 职场文书
党校党性分析材料
2014/12/19 职场文书
市场部岗位职责范本
2015/04/15 职场文书