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 相关文章推荐
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
JavaScript实现原型封装轮播图
Dec 27 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
法压式咖啡之制作法
2021/03/03 冲泡冲煮
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
鱼油专家:Omegavia
2016/10/10 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技