bootstrap 下拉多选框进行多选传值问题代码分析
更新时间：2017年02月14日 15:35:44 作者：aijava_1990
项目开发遇到个问题，就是引入bootstrap下拉多选框进行多选的时候，用form表单提交到后台，获取不到多选的值，只能获取的选择的第一个值，怎么回事呢？下面小编给大家分析下bootstrap 下拉多选框进行多选传值问题，一起看看吧
项目开发遇到个问题，就是引入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>
直接上代码~
<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 下拉多选框进行多选传值问题代码分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
请注意，这里说的是运算数的求值顺序。而非运算符，运算符的求值顺序我们比较熟悉。2011-08-08
详解bootstrap的modal-remote两种加载方式【强化】
本篇文章主要介绍了详解bootstrap的modal-remote两种加载方式【强化】，具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
这篇文章主要为大家详细介绍了JavaScript实现班级抽签小程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要为大家详细介绍了基于原生js淡入淡出函数封装，可兼容IE，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
大家都知道，面向对象的三大特征——封装、继承、多态。下面通过本文给大家介绍JS继承与闭包及JS实现继承的三种方式，感兴趣的朋友一起看看吧2017-10-10
这篇文章主要介绍了360doc网站不登录就无法复制内容的解决方法,需要的朋友可以参考下2018-01-01
表格行间隔显示颜色并实现高亮显示，这种效果大家都有见到过吧，下面就为大家详细介绍下,需要的朋友可不要错过2013-11-11
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
最近接了个项目，项目需求是这样的，当点击图片查看图片，再次点击大图被隐藏，在移动端用的比较多，因为移动端屏幕小，需要查看大图。具体代码实现过程本文给大家介绍，需要的朋友可以参考下2015-11-11
javascript从image转换为base64位编码的String
选择webview把image以base64位编码的方式传给本地应用，就不需要再取一次图片文件了，从而提高了速度2014-07-07
这篇文章主要介绍了JavaScript代理模式原理与用法,结合实例形式详细分析了JavaScript代理模式基本概念、原理、用法与操作注意事项,需要的朋友可以参考下2020-03-03
最新评论