方法:获取多选下拉框对象数组→循环判断option选项的selected属性(true为选中,false为未选中)→使用value属性取出选中项的值。实例演示如下:

1、HTML结构

1
2
3
4
5
6
7
<select id="test" multiple="true">
    <option value="option-A">option-A</option>  
    <option value="option-B">option-B</option>
    <option value="option-C">option-C</option
    <option value="option-D">option-D</option>
</select>
<input type="button" value="确定" onclick="fun()" />

2、javascript代码

1
2
3
4
5
6
7
8
9
10
function fun(){
    var select = document.getElementById("test");
    var str = [];
    for(i=0;i<select.length;i++){
        if(select.options[i].selected){
            str.push(select[i].value);
        }
    }
    alert(str);
}

3、效果演示

js怎么能取得多选下拉框选中的多个值?的更多相关文章

  1. js:jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 多选下拉框带搜索(aps.net)

    自己写了一个带搜索功能的多选下拉框,为了要获取值,就没有封装插件,实现思路 1.一个文本框 做搜索 2.一个文本框显示选中文本,一个隐藏控件存值 3.一个div里面绑定CheckBoxList控件(这 ...

  3. js多选下拉框

    1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...

  4. bootstrap-multiselect.js多选下拉框初始化时默认选中初始值

    bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式  二.HTML代码 <select id="msgRoles" multiple=&q ...

  5. Easyui-Combobox多选下拉框

    因为工作需要,引入combobox多选下拉框,并且获取选择的值并以","分开. 效果如下: 代码如下: <html> <head> <title> ...

  6. Bootstrap3级联多选下拉框

    <!DOCTYPE html> <html> <head> <title>Bootstrap3级联多选下拉框</title> <met ...

  7. query多选下拉框插件 jquery-multiselect(修改)

    其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...

  8. MVC实现多选下拉框,保存并显示多选项

    在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...

  9. MVC实现多选下拉框

    借助Chosen Plugin可以实现多选下拉框. 选择多项: 设置选项数量,比如设置最多允许2个选项: 考虑到多选下拉<select multiple="multiple" ...

随机推荐

  1. 从Hadoop到Spark的架构实践

    当下,Spark已经在国内得到了广泛的认可和支持:2014年,Spark Summit China在北京召开,场面火爆:同年,Spark Meetup在北京.上海.深圳和杭州四个城市举办,其中仅北京就 ...

  2. Linux三剑客-SED

    1.Sed是什么 Sed:字符流编辑器,Stream Editor 2.Sed功能与版本 处理日志文件,日志,配置文件等 增加.删除.修改.查询 sed --version 可以通过man sed 来 ...

  3. SQlite源码分析-体系结构

    体系结构 在内部,SQLite由以下几个组件组成:内核.SQL编译器.后端以及附件.SQLite通过利用虚拟机和虚拟数据库引擎(VDBE),使调试.修改和扩展SQLite的内核变得更加方便.所有SQL ...

  4. 伪静态规则RewriteRule-htaccess

    伪静态实际上是利用php把当前地址解析成另一种方法来访问网站,要学伪静态规则的写法,要懂一点正则 一.正则表达式教程 有一个经典的教程:正则表达式30分钟入门教程 常用正则如下: . 换行符以外的所有 ...

  5. PHP 依赖注入,依赖反转 (IOC-DI)

    https://my.oschina.net/u/3529405/blog/1821744 <?php /** * 依赖注入 IOC DI * 参考文章 * https://segmentfau ...

  6. 【vue】vue +element 搭建项目,将js函数变成vue的函数

    demo:时间转换 1.目录 <1>在src文件夹下新建文件夹prototypefns--------在此文件夹创建util.js, <2>在prototypefns下新建文件 ...

  7. Keepalive工作原理

    Keepalive工作原理 1.1软件介绍 Keepalived软件起初是专为LVS负载均衡软件设计的,用来管理并监控LVS集群系统中各个服务节点的状态,后来又加入了可以实现高可用的VRRP功能.因此 ...

  8. ORA-01034:ORACLE not available ORA-27101:shared memory realm does not exit

    ORA-01034:ORACLE not available ORA-27101:shared memory realm does not exit   ERROR: ORA-01034:ORACLE ...

  9. wxWidgets 在 Linux 下开发环境配置

    本文基于 CodeBlocks (16.0.1) 和 wxWidgets (3.0.2) 搭建 Linux 下 GUI 开发环境. 1. 安装 CodeBlocks Ubuntu 默认的源当前 Cod ...

  10. Spring Security(二十六):8. Spring Security Community

    8.1 Issue Tracking Spring Security uses JIRA to manage bug reports and enhancement requests. If you ...