方法:获取多选下拉框对象数组→循环判断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. 新建SpringBoot项目运行页面报错Whitelabel Error Page This application has no explicit mapping for /error, so yo

    新建SpringBoot项目运行页面报错Whitelabel Error Page This application has no explicit mapping for /error, so yo ...

  2. 【HNOI2016】树

    [HNOI2016]树 题目描述 每一个复制过来的子树(我们称为一个树团)有用的只有需要被访问的节点,包括根,根的父亲,要询问的点.我们只需要求出这些点到其所在树团根的距离以及倍增数组就好了. 需要讨 ...

  3. 转://如何创建ASM磁盘

    1  前言 无论是安装单机版的asm还是rac都离不开ASM磁盘组的创建,创建ASM磁盘组的关键是创建好需要的asm磁盘,发现很多网友安装grid软件和grid实例,都在磁盘的创建这里有很大的问题,本 ...

  4. 【转】vmware的macos中apple ID一直登陆不上解决 ---(伪造smbios设备信息)

    伪造smbios设备信息 原文网址:http://www.insanelymac.com/forum/topic/292170-how-to-spoof-real-mac-in-vmware/page ...

  5. Zookeeper系列一:Zookeeper介绍、Zookeeper安装配置、ZK Shell的使用

    https://www.cnblogs.com/leeSmall/p/9563547.html 一.Zookeeper介绍 1. 介绍Zookeeper之前先来介绍一下分布式 1.1 分布式主要是下面 ...

  6. 【html5】解决HTML5新标签不兼容的问题

    html5标签: 1.语义化好 -> SEO a). 程序交流方便 b). 搜索引擎友好 baidu -> 不认识 google 2.本身不兼容,想兼容低版本,请使用如下方法: 方式一:使 ...

  7. utc时间转成local时间

    public static Date utcToLocal(String utcTime){ SimpleDateFormat sdf = new SimpleDateFormat("yyy ...

  8. 一)surging 微服务框架使用系列之surging 的准备工作rabbitmq安装(转载 https://www.cnblogs.com/alangur/p/8339905.html)

    (一)surging 微服务框架使用系列之surging 的准备工作rabbitmq安装   (1)下载erlang: http://www.erlang.org/download/otp_win64 ...

  9. 微服务框架surging学习之路——序列化 (转载https://www.cnblogs.com/alangur/p/10407727.html)

    微服务框架surging学习之路——序列化   1.对微服务的理解 之前看到在群里的朋友门都在讨论微服务,看到他们的讨论,我也有了一些自己的理解,所谓微服务就是系统里的每个服务都 可以自由组合.自由组 ...

  10. ldconfig 的简单用法

    ldconfig: configure dynamic linker run-time binds. 比如,我编译完 boost 后(boost 的有些库需要编译后生成动态或静态库使用,例如 Pyth ...