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  THIS详解 面向对象
Mar 25 Javascript
XENON基于JSON变种
Jul 27 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
Javascript之String对象详解
Jun 08 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
PHP时间类完整代码实例
2021/02/26 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
python提取内容关键词的方法
2015/03/16 Python
对Python3 序列解包详解
2019/02/16 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
python 读取串口数据的示例
2020/11/09 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
售后服务承诺书模板
2014/05/21 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
单位政审意见范文
2015/06/04 职场文书
会计做账心得体会
2016/01/22 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书