方法:获取多选下拉框对象数组→循环判断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. kafka-connect-hdfs重启,进去RECOVERY状态,从hadoop hdfs拿租约,很正常,但是也太久了吧

    虽说这个算是正常现象,等的时间也太久了吧.分钟级了.这个RECOVERY里面的WAL有点多余.有这么久的时间,早从新读取kafka写入hdfs了.纯属个人见解. @SuppressWarnings(& ...

  2. UVA1442-Cav(扫描法)

    Problem UVA1442-Cav Accept: 185  Submit: 679Time Limit: 3000 mSec Problem Description Input The inpu ...

  3. 【ECMAScript5】ECMAScript5中有关数组的常用方法

    1.indexOf() 此方法返回在改数组中第一个找到的元素位置,如果它不存在则返回-1 var arr = ['apple','orange','pear']; console.log(" ...

  4. Pycharm 自定义快捷键

    之前使用 Eclipse 时,快捷键 Ctrl + M 会使当前窗口最大化.这里配置 PyCharm 具有相同功能. 1)打开 File  >  Settings  >  Keymap 2 ...

  5. 初学Python——介绍一些内置方法

    1.abs()求绝对值 a=abs(-10) print(a) # 输出:10 2.all() 用来检测列表元素是否全部为空.0.False print(all([0,5,4])) #当列表所有元素都 ...

  6. jquery.$.ajax简单的使用

    function LoadWFS() { var viewer = new Cesium.Viewer('cesiumContainer'); $.ajax({ url: "http://l ...

  7. 《maven in action》部分知识点总结

    maven in action 的部分知识点总结 今天又将<maven in action>这本书看了一遍,总结了一下,大概需要的知识点 (一)解耦   使用maven,在没有任何实际的J ...

  8. LOJ2527 HAOI2018 染色 容斥、生成函数、多项式求逆

    传送门 调了1h竟然是因为1004535809写成了998244353 "恰好有\(K\)种颜色出现了\(S\)次"的限制似乎并不容易达到,考虑容斥计算. 令\(c_j\)表示强制 ...

  9. 深入理解Spring Boot数据源与连接池原理

    ​ Create by yster@foxmail.com 2018-8-2 一:开始 在使用Spring Boot数据源之前,我们一般会导入相关依赖.其中数据源核心依赖就是spring‐boot‐s ...

  10. Netty入门(一)之webSocket聊天室

    一:简介 Netty 是一个提供 asynchronous event-driven (异步事件驱动)的网络应用框架,是一个用以快速开发高性能.高可靠性协议的服务器和客户端. 换句话说,Netty 是 ...