最近在写报表管理模块时,需要通过条件去筛选符合条件的数据,筛选条件用的布局有select,input等。在调试的过程中一直获取不到select选中的option。于是就查询些资料,发现用select的selected属性可以获取到option的值。下面通过demo来演示:

通过2种方式:

一、jquery方法(页面中必须加载过jquery库)-------------------推荐使用

1:var options=$("#test option:selected");  //获取选中的项
2:alert(options.val());   //拿到选中项的值
3:alert(options.text());   //拿到选中项的文本

demo代码:

<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>

二、通过原生js方法

1:拿到select对象: var myselect=document.getElementById("test");
2:拿到选中项的索引:var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value: myselect.options[index].value;
4:拿到选中项options的text: myselect.options[index].text;

推荐使用第一种jqueiry方法去获取select选中的option~~~~~~~~

js动态获取select选中的option的更多相关文章

  1. JS动态获取select中被选中的option的值,并在控制台输出

    生活城市: <select id="province"> <option>河南省</option> <option>黑龙江省< ...

  2. 比较日期大小以及获取select选中的option的value

    原生JavaScript如何获取select选中的value // 1. 拿到select对象 const selectObject = document.getElementById('test') ...

  3. JS动态改变select选择变更option的index值

    document.getElementById("louyuming").options[0].selected=true; function jsSelectIsExitItem ...

  4. Jquery获取select选中的option的文本信息

    注意:以下用的$(this)代表当前选中的select框 第一种: $(this).children("option:selec... ...查看全文

  5. 获取select 选中的option中自定义的名称的之

    <select style="width: 220px;height: 20px;margin: 0 0 0 20px;" id="invest_ticket&qu ...

  6. js获取select选中的内容

    ### 获取select选中的内容 js获取select标签选中的值 var obj = document.getElementById("selectId");//获取selec ...

  7. js:如何获取select选中的值

    我想获取select选中的value,或者text,或者…… 比如这个: <select id="select">    <option value=" ...

  8. jquery获取select选中的值

    http://blog.csdn.net/renzhenhuai/article/details/19569593 误区: 一直以为jquery获取select中option被选中的文本值,是这样写的 ...

  9. Jquery怎么获取select选中项 自定义属性的值

    Jquery如何获取select选中项 自定义属性的值?HTML code <select id="ddl" onchange="ddl_change(this)& ...

随机推荐

  1. 主流前端框架对比:Vue.js , React, Angular.js

    个人认为Vue.js的文档最恳切.我认为结合文档和遇到问题Google答案的匹配度来讲:Vue.js > ReactJS > AngularJS > Angular 2 如何使用Vu ...

  2. IDEA 出现错误:找不到或无法加载主类

    idea本身缓存问题 解决:清理缓存重启IDEAfile-->invalidate Cache/restart 之后再重新build. 还不行的话,设置一下file-->project s ...

  3. .NET Core在安装(VS2015)与部署

    .NET Core开发环境搭建 使用VS2015开发.NET Core项目,环境的搭建可以参考官网,大致安装步骤如下: 1.首先你得装个vs2015 并且保证已经升级至 update3及以上,下载链接 ...

  4. bzoj2870

    题解: 边分治入门题 当然并查集+维护直径更加简单 就是两棵树二合一直径是两颗树上的4个直径两两组合的最大值 查询路径长度你搞个差分查个lca就好了 点分治并不能做这题 分成多个联通块就gg了(点分治 ...

  5. Python学习(二十九)—— pymysql操作数据库优化

    转载自:http://www.cnblogs.com/liwenzhou/articles/8283687.html 我们之前使用pymysql操作数据库的操作都是写死在视图函数中的,并且很多都是重复 ...

  6. Codeforces 830C Bamboo Partition 其他

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF830C.html 题解 把问题转化成求最大的 $d$ ,满足$$\sum_{1\leq i \leq n}( ...

  7. 利用Flume将MySQL表数据准实时抽取到HDFS

    转自:http://blog.csdn.net/wzy0623/article/details/73650053 一.为什么要用到Flume 在以前搭建HAWQ数据仓库实验环境时,我使用Sqoop抽取 ...

  8. Python中GIL

    GIL(global interpreter lock)全局解释器锁 python中GIL使得同一个时刻只有一个线程在一个cpu上执行,无法将多个线程映射到多个cpu上执行,但GIL并不会一直占有,它 ...

  9. ASP.NET 页面执行顺序

    1.对象初始化(Onlnit方法) 页面中的控件(包括页面本身)都是在它们最初的form中被首次初始化的,通过在aspx页面的后台代码文件的构造器中声明你的对象,页面将知道对象的类型,并知道需要创建多 ...

  10. 爬虫1 socket方式下载一张图片

    import socket import re client = socket.socket() # 图片url img_url = 'https://img03.sogoucdn.com/app/a ...