js怎么能取得多选下拉框选中的多个值?
方法:获取多选下拉框对象数组→循环判断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怎么能取得多选下拉框选中的多个值?的更多相关文章
- js:jquery multiSelect 多选下拉框实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 多选下拉框带搜索(aps.net)
自己写了一个带搜索功能的多选下拉框,为了要获取值,就没有封装插件,实现思路 1.一个文本框 做搜索 2.一个文本框显示选中文本,一个隐藏控件存值 3.一个div里面绑定CheckBoxList控件(这 ...
- js多选下拉框
1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...
- bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式 二.HTML代码 <select id="msgRoles" multiple=&q ...
- Easyui-Combobox多选下拉框
因为工作需要,引入combobox多选下拉框,并且获取选择的值并以","分开. 效果如下: 代码如下: <html> <head> <title> ...
- Bootstrap3级联多选下拉框
<!DOCTYPE html> <html> <head> <title>Bootstrap3级联多选下拉框</title> <met ...
- query多选下拉框插件 jquery-multiselect(修改)
其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...
- MVC实现多选下拉框,保存并显示多选项
在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...
- MVC实现多选下拉框
借助Chosen Plugin可以实现多选下拉框. 选择多项: 设置选项数量,比如设置最多允许2个选项: 考虑到多选下拉<select multiple="multiple" ...
随机推荐
- 在Intellij IDEA中使用Maven的方式将项目导出为jar包
前言:由于项目使用maven管理方式,所以在未发布版本的时候,就需要将项目打成jar包,供本地调试使用.注意在使用本地jar包的时候,需要将pom文件中相关jar包的依赖屏蔽,再将jar包加入项目中. ...
- django ORM的总结
1.django分表的方案: https://mp.weixin.qq.com/s?__biz=MjM5NjA3Nzk3Ng==&mid=2648154502&idx=1& ...
- Android studio中布局文件出现render problem问题
当做layout时,可能会出现render problem的情况.意思就是无法预览当前布局页面,这种情况是因为API版本太高造成的.只需要修改API为更低版本即可.
- 【vue】vue +element 搭建项目,el-input 常用的验证
1.el-input 常用布局 <el-input class="filter-item dialog-search" size="small" @key ...
- 004_Python高级特性(1):Iterators、Generators和itertools(参考)
对数学家来说,Python这门语言有着很多吸引他们的地方.举几个例子:对于tuple.lists以及sets等容器的支持,使用与传统数学类 似的符号标记方式,还有列表推导式这样与数学中集合推导式和集的 ...
- 调试器GDB的基本使用方法
GDB调试的三种方式: 1. 目标板直接使用GDB进行调试. 2. 目标板使用gdbserver,主机使用xxx-linux-gdb作为客户端. 3. 目标板使用ulimit -c unlimited ...
- Python黑魔法 --- 异步IO( asyncio) 协程
python asyncio 网络模型有很多中,为了实现高并发也有很多方案,多线程,多进程.无论多线程和多进程,IO的调度更多取决于系统,而协程的方式,调度来自用户,用户可以在函数中yield一个状态 ...
- SpringBoot如何使用拦截器
1.配置拦截器 @Configuration public class WebMvcConfigurer extends WebMvcConfigurerAdapter { @Override pub ...
- mybatis百科-结果集映射类ResultMap
目录 1 成员变量 2 构造函数 3 其他函数 3.1 setter 和 getter 函数 4 静态内部类 4.1 成员变量 4.2 构造函数 4.3 建造者相关的函数 4.4 获取配置的构造方法参 ...
- 十四、怎么获取data-id中的值
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...