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 相关文章推荐
关于URL中的特殊符号使用介绍
Nov 03 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
JsonServer安装及启动过程图解
Feb 28 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
php实现的http请求封装示例
2016/11/08 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
Jquery 扩展方法
2010/05/06 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
Python定时器实例代码
2017/11/01 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python实现图像拼接功能
2020/03/23 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
入团者的自我评价分享
2013/12/02 职场文书
自荐信的基本格式
2014/02/22 职场文书
群众路线党课主持词
2014/04/01 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
工会文体活动总结
2015/05/07 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS