bootstrap 下拉多选框进行多选传值问题代码分析


Posted in Javascript onFebruary 14, 2017

项目开发遇到个问题,就是引入bootstrap下拉多选框进行多选的时候,用form表单提交到后台,获取不到多选的值,只能获取的选择的第一个值。

纠结了会。

jsp页面需要引入这东东~

<link rel="stylesheet" href="${ctx}/js/selectbootstrap/dist/css/bootstrap-select.min.css" rel="external nofollow" >
<script src="${ctx}/js/selectbootstrap/dist/js/bootstrap-select.min.js"></script>

直接上代码~

bootstrap 下拉多选框进行多选传值问题代码分析

<head>
<script type="text/JavaScript"> 
function fun(){
var str=[];
var obj = document.getElementById("approverq");
for(var i=0;i<obj.options.length;i++){
if(obj.options[i].selected){
str.push(obj.options[i].value);// 收集选中项
}
}
$("#approver").val(str);
}
</script>
</head>
<body>
<div class="l_err" style="width: 100%; margin-top: 2px;"></div>
<form id="form" name="form" class="form-horizontal" method="post"
action="${ctx}/leave/editEntity.shtml">
<input type="hidden" class="form-control checkacc" 
value="${leave.id}" name="LeaveFormMap.id" id="id">
<section class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label class="col-sm-3 control-label">审批人</label>
<div class="col-sm-9">
<input type="hidden" class="form-control" placeholder="请输入事由" name="LeaveFormMap.approver" id="approver"value="${leave.approver}">
<select name="" id="approverq" class="form-control selectpicker" multiple="true">
<option value="${leave.approver}" >${leave.approver}</option>
<c:forEach items="${list}" var="list">
<option value="${list.userName}" >${list.userName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">意见</label>
<div class="col-sm-9">
<textarea name="LeaveFormMap.idea" id="idea" class="form-control"
style="width:600px;height:100px;" readonly="readonly">${leave.idea}
</textarea> 
</div>
</div>
</div>
<footer class="panel-footer text-right bg-light lter">
<button type="submit" class="btn btn-success btn-s-xs" onclick="fun()">提交</button>
</footer> 
</section>
</form>
</body>

这样就好了。。

bootstrap 下拉多选框进行多选传值问题代码分析

以上所述是小编给大家介绍的bootstrap 下拉多选框进行多选传值问题代码分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript操作xml
Nov 04 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
微信小程序 弹幕功能简单实例
Feb 14 #Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 #Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 #Javascript
用file标签实现多图文件上传预览
Feb 14 #Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 #Javascript
javascript中BOM基础知识总结
Feb 14 #Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 #Javascript
You might like
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
Node.js实现文件上传
2016/07/05 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
python安装与使用redis的方法
2016/04/19 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python操作redis方法总结
2018/06/06 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python3中property使用方法详解
2019/04/23 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
python爬虫增加访问量的方法
2019/08/22 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
python如何实时获取tcpdump输出
2020/09/16 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
优秀团支部申报材料
2014/12/26 职场文书
灵山大佛导游词
2015/02/04 职场文书
党校毕业个人总结
2015/02/28 职场文书
美丽的大脚观后感
2015/06/03 职场文书
医院见习总结
2015/06/24 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书