最近在写报表管理模块时,需要通过条件去筛选符合条件的数据,筛选条件用的布局有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. 20165323 预备作业3 Linux安装及学习

    一.Linux安装 首先我按照老师所给的步骤下载了VirtualBox 5.2.6和Ubuntu 16.04.3.有流程下载很简单,但是在下载的过程中还是出现了一些问题. 1.VirtualBox 只 ...

  2. Idea设置行注释不显示在行首

    如图:idea使用ctrl+/注释时候,//都在行首,强迫症表示受不了 解决方法如图

  3. jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

    jQuery EasyUI学习网址:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuery MiniUI学习网址:http:// ...

  4. Eclipse Memory Analyzer

    先写一段可以制造堆溢出的代码 package com.test.jvm.oom; import java.util.ArrayList; import java.util.List; /** * @d ...

  5. RxJava2.0相关教程

    这可能是最好的RxJava 2.x 教程(完结版) https://www.jianshu.com/p/0cd258eecf60 RxJava2.0——从放弃到入门 https://www.jians ...

  6. eclipse 编辑代码区字体大小

    wiondow-->preferences-->general-->appearance-->colors and fonts-->java-->java edit ...

  7. springboot创建错误

    1.Unknown system variable 'query_cache_size' 解决:https://www.cnblogs.com/nicknailo/articles/9074804.h ...

  8. app奔溃经验和应对方式

    bug直接影响:用户体验.app商店评级.用户忠诚度 前言: 因为现在市场是andriod手机的碎片化.造成了andriod手机更加容易出现APP的崩溃,通常在网络异常时APP上还在进行数据交互,即会 ...

  9. POJ3321Apple Tree Dfs序 树状数组

    出自——博客园-zhouzhendong ~去博客园看该题解~ 题目 POJ3321 Apple Tree 题意概括 有一颗01树,以结点1为树根,一开始所有的结点权值都是1,有两种操作: 1.改变其 ...

  10. Hive| 压缩| 存储| 调优

    Hadoop压缩配置 修改Hadoop集群具有Snappy压缩方式: 查看hadoop支持的压缩方式 [kris@hadoop101 datas]$ hadoop checknative 将编译好的支 ...