最近在写报表管理模块时,需要通过条件去筛选符合条件的数据,筛选条件用的布局有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. 构建简单的json树形菜单

    json结构: var Menu = [{ tit:"一级菜单", submenu:[{ tit:"二级菜单", url:"", func: ...

  2. 配置文件——节点<machineKey>的作用,强随机生成

    <machineKey>这个节允许你设置用于加密数据和创建数字签名的服务器特定的密钥.ASP.NET自动使用它来保护表单验证Cookie,你也可以将它用于受保护的视图状态数据.同时,这个密 ...

  3. DataFrames和Kudu

    Kudu为Kudu表提供了一个自定义的原生数据源.可以和DataFrame API紧密集成: 使用DataFrame的好处就是可以从很多的数据源创建dataframe,包括现有的RDD,Hive表或S ...

  4. OSPF协议之详细图解

    OSPF是一种基于SPF算法的链路状态路由协议. 上图是在一个OSPF区域里面添入一台新的路由器的时候,OSPF协议的工作过程,如果你能非常详细的叙述出这张图的话,基本上OSPF协议的工作过程你就掌握 ...

  5. 041 Spring Boot中排除功能的处理

    这个问题,原本是没有注意,主要是理解的不够深刻. 1.先看我的配置文件 package com.springBoot.ioc.config; import com.springBoot.ioc.con ...

  6. Zookeeper安装使用

    一:zookeeper介绍 Zookeeper 分布式协调组件.本质一个软件. Zookeeper常用功能 1 发布订阅功能.把zookeeper当作注册中心原因. 2 分布式/集群管理功能. 使用j ...

  7. Fire! -两次dfs

    题目描述: Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the owner of ...

  8. Sunscreen POJ - 3614(贪心)

    To avoid unsightly burns while tanning, each of the C (1 ≤ C ≤ 2500) cows must cover her hide with s ...

  9. POJ 1328 安装雷达 (贪心)

    <题目链接> 题目大意: 以x轴为分界,y>0部分为海,y<0部分为陆地,给出一些岛屿坐标(在海中),再给出雷达可达到范围,雷达只可以安在陆地上,问最少多少雷达可以覆盖所以岛屿 ...

  10. Linux命令集

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...