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处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
详解jquery选择器的原理
Aug 01 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 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实现蜘蛛访问日志统计
2013/07/05 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python运用于数据分析的简单教程
2015/03/27 Python
Python使用MONGODB入门实例
2015/05/11 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python 中Pickle库的使用详解
2018/02/24 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
几道Web/Ajax的面试题
2016/11/05 面试题
会计师职业生涯规划范文
2014/02/18 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
项目负责人岗位职责
2015/02/15 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js