最近在写报表管理模块时,需要通过条件去筛选符合条件的数据,筛选条件用的布局有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. win10ssh连接ubuntu服务器并本地绘图

    update @ 2018-11-07 00:36:38 用xrdp+tigervnc等的组合,可以使用原生unity桌面.具体教程见ubuntu日常使用指南 工具准备 win10上: xshell, ...

  2. Web的几种上传方式总结

    问题 文件上传在WEB开发中应用很广泛. 文件上传是指将本地图片.视频.音频等文件上传到服务器上,可以供其他用户浏览或下载的过程. 以下总结了常见的文件(图片)上传的方式和要点处理. 表单上传 这是传 ...

  3. python---hash查找

    以前只会用,没了解过原理. # coding = utf-8 class HashTable: def __init__(self): # 哈希表的初始大小已经被选择为 11.尽管这是任意的,但是重要 ...

  4. java web获取请求体内容

    Java Web中如何获取请求体内容呢? 我们知道请求方式分为两种:Get,Post. /*** * Compatible with GET and POST * * @param request * ...

  5. 封装curl的get和post请求

    /** * GET 请求 * @param string $url */ function http_get($url){ $oCurl = curl_init(); if(stripos($url, ...

  6. alpha冲刺8/10

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺倒计时之8 团队部分 后敬甲(组长) 过去两天完成了哪些任务 首页重新设计 课程时间线确定 答辩准备 接下来的计划 ...

  7. nginx 限制并发访问及请求频率

    0. 1.参考 [工作]Nginx限制IP并发连接数和请求数的研究 Module ngx_http_limit_conn_module Module ngx_http_limit_req_module ...

  8. 如何扩展Orchard

    翻译自: http://msdn.microsoft.com/en-us/magazine/hh708754.aspx     动态类型系统 Content item是Orchard中的原子, 比如b ...

  9. Codeforces 295E Yaroslav and Points 线段树

    Yaroslav and Points 明明区间合并一下就好的东西, 为什么我会写得这么麻烦的方法啊啊啊. #include<bits/stdc++.h> #define LL long ...

  10. python---读取/写入excel用例数据

    使用excel管理用例 ①.读取excel的用例数据,每一类参数保存在list中返回:②.那么接下来使用unitest编写用例时,可以去调用这个函数.使用里面的数据: 个人认为好处是,大部分人还是习惯 ...