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 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
Js apply方法详解
Feb 16 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
Ajax基础知识详解
2017/02/17 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python zip()函数的使用示例
2020/09/23 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
新闻专业学生的自我评价
2014/02/13 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
农村门前三包责任书
2014/07/25 职场文书
入党自荐书范文
2015/03/05 职场文书
教师理论学习心得体会
2016/01/21 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL