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中输出标签的方法
Aug 27 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
微信小程序 弹幕功能简单实例
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代码
2007/03/03 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
python局域网ip扫描示例分享
2014/04/03 Python
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python实现excel读写数据
2021/03/02 Python
更新修改后的Python模块方法
2019/03/03 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
在python3中实现更新界面
2020/02/21 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
总经理文秘岗位职责
2014/02/03 职场文书
综治宣传月活动总结
2014/04/28 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
期末个人总结范文
2015/02/13 职场文书
个人先进事迹总结
2015/02/26 职场文书
社团个人总结范文
2015/03/05 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
Redis实现订单过期删除的方法步骤
2022/06/05 Redis