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 程序库的比较(一)之DOM功能
Apr 07 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
详解Vue中CSS样式穿透问题
Sep 12 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
Vue实现随机验证码功能
Dec 29 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
python实现读取并显示图片的两种方法
2017/01/13 Python
python实现图片处理和特征提取详解
2017/11/13 Python
python字典操作实例详解
2017/11/16 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
Python字符串的一些操作方法总结
2019/06/10 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
如何开发安全的AJAX应用
2014/03/26 面试题
英语自我评价范文
2014/01/24 职场文书
电影开国大典观后感
2015/06/04 职场文书
公司备用金管理制度
2015/08/04 职场文书
担保书格式范文
2015/09/22 职场文书
2019年思想汇报
2019/06/20 职场文书
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL