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 相关文章推荐
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
vue el-table实现递归嵌套的示例代码
Aug 14 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php字符串分割函数用法实例
2015/03/17 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
解析javascript 浏览器关闭事件
2013/07/08 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
JS高级运动实例分析
2016/12/20 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
super()与this()的区别
2016/01/17 面试题
周年庆典邀请函范文
2014/01/24 职场文书
大四自我鉴定
2014/02/08 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
政府信息公开实施方案
2014/05/09 职场文书
国际贸易求职信
2014/07/05 职场文书
青岛海底世界导游词
2015/02/11 职场文书
接待员岗位职责
2015/02/13 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
2015年暑假工作总结
2015/07/13 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers