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 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
jquery分页对象使用示例
Apr 01 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
jquery实现动态画圆
Dec 04 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
JS实现transform实现扇子效果
Jan 17 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
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
简单介绍Python中的floor()方法
2015/05/15 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
几个Linux面试题笔试题
2016/08/01 面试题
十佳大学生村官事迹
2014/01/09 职场文书
会计岗位描述
2014/02/22 职场文书
《识字五》教学反思
2014/03/01 职场文书
意向协议书范本
2014/04/23 职场文书
禁烟标语大全
2014/06/11 职场文书
办理收楼委托书范本
2014/10/09 职场文书
python中的None与NULL用法说明
2021/05/25 Python
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
Sql Server之数据类型详解
2022/02/28 SQL Server
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android