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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
vue cli webpack中使用sass的方法
Feb 24 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
解决vue addRoutes不生效问题
Aug 04 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入门学习知识点三 PHP上传
2011/07/14 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
实例详解Python模块decimal
2019/06/26 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
django云端留言板实例详解
2019/07/22 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
如何用Python 加密文件
2020/09/10 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
新员工欢迎词
2014/01/12 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
小学家长通知书评语
2014/12/31 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
MySQL连接控制插件介绍
2021/09/25 MySQL