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 相关文章推荐
简明json介绍
Sep 28 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
如何利用ES6进行Promise封装总结
Feb 11 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 管理系统程序中的后门
2009/08/05 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
python求pi的方法
2014/10/08 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
10条PHP编程习惯
2014/05/26 面试题
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
如何写好升职自荐信
2014/01/06 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
兵马俑导游词
2015/02/02 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
如何用python绘制雷达图
2021/04/24 Python
无线电知识基础入门篇
2022/02/18 无线电