最近在写报表管理模块时,需要通过条件去筛选符合条件的数据,筛选条件用的布局有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. vs2017初学c++环境配置及使用教程

    https://blog.csdn.net/jmpan_sjtu/article/details/79053169 https://blog.csdn.net/luoyu510183/article/ ...

  2. proc/net/dev实时网速统计实例

    https://blog.csdn.net/dosthing/article/details/80384541 http://www.l99.com/EditText_view.action?text ...

  3. 错误 java.lang.ClassCastException: com.xx cannot be cast to ResourceBundle

    出现错误: java.lang.ClassCastException: com.xxx cannot be cast to ResourceBundle 百度搜索错误,没有结果.谷歌搜索:http:/ ...

  4. SP3734 PERIODNI - Periodni

    题解: 第一道笛卡尔树dp 会发现以一个点为分界 如果左边大于它右边大于它 那么大于的那部分是相互不影响的 于是我们对序列建立笛卡尔树 满足父亲节点的v<儿子节点的v 然后这棵树的中序遍历为原序 ...

  5. Python_collections_OrderedDict有序字典部分功能介绍

    OrderedDict():实现字典的固定排序,是字典的子类 import collections dic = collections.OrderedDict() dic['k1'] = 3 dic[ ...

  6. Linux centos7安装python3并且不影响python2

    一.安装依赖 yum -y groupinstall "Development tools" yum -y install zlib-devel bzip2-devel opens ...

  7. 51Nod1577 异或凑数 线性基

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1577.html 题意 给定一个长度为 n 的序列. 有 m 组询问,每一组询问给出 L,R,k ,询 ...

  8. oracle数据入库出现空格问题

    java做数据入库,不知为什么报如下图错误: debug发现数据是两位,如(FB),但是入库后发现FB后面多了两个空格,检查表发现类型声明是char(4),上网百度,说是char类型会自动补足.参考h ...

  9. Python GUI - tkinter

    目录: Tkinter 组件 标准属性 几何管理 代码实例: 1. Label & Button 2. Entry & Text 3.Listbox列表 4.Radiobutton单选 ...

  10. Linux下C语言的文件操作

    代码: #include <stdio.h> #include <string.h> #include <fcntl.h> /*************基本的函数A ...