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遍历checkbox获取选中项value值的方法
Feb 13 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
微信小程序 http请求的session管理
Jun 07 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
js实现多个标题吸顶效果
Jan 08 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数组无限分级数据的层级化处理代码
2012/12/29 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
酒店管理专业毕业生推荐信
2013/11/10 职场文书
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
党员党性分析材料
2014/02/17 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
Redis 常见使用场景
2021/08/30 Redis
在 Python 中利用 Pool 进行多线程
2022/04/24 Python