最近在写报表管理模块时,需要通过条件去筛选符合条件的数据,筛选条件用的布局有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. Hbase启动hbase shell运行命令报Class path contains multiple SLF4J bindings.错误

    1:Hbase启动hbase shell运行命令报Class path contains multiple SLF4J bindings.错误,是因为jar包冲突了,所以对于和hadoop的jar包冲 ...

  2. CentOS6.9安装HDFS

    1.安装依赖包 yum install -y gcc openssh-clients 2.升级glib2.14 升级glibc-2.14用到的rpm 下载地址:https://pan.baidu.co ...

  3. C# 之 比较两个word文档的内容

    利用 Microsoft.Office.Interop.Word 组件进行比较.引入命名空间:using Word2013 = Microsoft.Office.Interop.Word; 代码如下: ...

  4. Nginx+Redis+Ehcache大型高并发高可用三层架构总结

    在生产环境中,对于高并发架构,我们知道缓存 是最重要的环节,对于大量的高并发.可以采用三层缓存架构来实现,也就是Nginx+Redis+Ehcache 对于中间件Nginx常来做流量分发,同事ngin ...

  5. net core体系-web应用程序-4net core2.0大白话带你入门-4asp.net core配置项目访问地址

    asp.net core配置访问地址  .net core web程序,默认使用kestrel作为web服务器. 配置Kestrel Urls有四种方式,我这里只介绍一种.其它方式可自行百度. 在Pr ...

  6. 大数据——hbase

    进入hbase hbase shell 部分命令清单 查询服务器状态   status 查询hbase版本   version 1. 创建一个表 create 'table1', 'tab1_id', ...

  7. Codeforces 362D Fools and Foolproof Roads

    Fools and Foolproof Roads 并查集瞎搞搞就行, 有点小坑点. #include<bits/stdc++.h> #define LL long long #defin ...

  8. TreeSet集合的自然排序与比较器排序、Comparable接口的compareTo()方法

    [自然排序] package com.hxl; public class Student implements Comparable<Student> { private String n ...

  9. CentOS 7.2配置Apache服务httpd小伙伴们可以参考一下

    这篇文章主要为大家详细介绍了CentOS 7.2配置Apache服务 httpd上篇,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 一.Perl + mod_perl 安装mod_perl使Per ...

  10. 029 c3p0的小测试

    今天被问到这个问题,就实验了一下,后续会继续补充一些配置项的意思. 一:操作步骤 1.大纲 2.新建sql -- ---------------------------- -- Table struc ...