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-data的三种用法
Apr 18 jQuery
jquery replace方法去空格
May 08 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
php基础学习之变量的使用
2011/06/09 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php实现的SESSION类
2014/12/02 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
python的exec、eval使用分析
2017/12/11 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
python实现在线翻译
2020/06/18 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
车间班长岗位职责
2013/11/30 职场文书
党性教育心得体会
2014/09/03 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
社区端午节活动总结
2015/02/11 职场文书
2015国庆节宣传语
2015/07/14 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书