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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
微信小程序 弹幕功能简单实例
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 rsa加密解密使用方法
2015/04/27 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
关于图片验证码设计的思考
2007/01/29 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
小程序实现留言板
2018/11/02 Javascript
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python求最大连续子数组的和
2018/07/07 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Python绘制数码晶体管日期
2021/02/19 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
求职信的七个关键技巧
2014/02/05 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
英语教师个人总结
2015/02/09 职场文书
小爸爸观后感
2015/06/15 职场文书
初中物理教学反思
2016/02/19 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技