脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 下拉多选

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 下拉多选框进行多选传值问题代码分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JSON 的正确用法探讨：Pyhong、MongoDB、JavaScript与Ajax

    JSON 的正确用法探讨：Pyhong、MongoDB、JavaScript与Ajax

    这篇文章主要介绍了JSON 的正确用法探讨：Pyhong、MongoDB、JavaScript与Ajax的相关资料,具有参考借鉴价值，需要的朋友一起学习吧
    2016-05-05
  • 为调试JavaScript添加输出窗口的代码

    为调试JavaScript添加输出窗口的代码

    调试JavaScript是一件很麻烦的事，尽管有很多很好用的调试工具，但有时候想要跟踪值的变化，但即不想中断脚本执行，也不想用alert显示值信息，这种情况下，一般的做法是在页面上添加一个DIV或者其它元素，然后再往里面添加调试信息。
    2010-02-02
  • javascript实现table选中的行以指定颜色高亮显示的方法

    javascript实现table选中的行以指定颜色高亮显示的方法

    这篇文章主要介绍了javascript实现table选中的行以指定颜色高亮显示的方法,实例分析了javascript操作table表格元素与相关样式的技巧,需要的朋友可以参考下
    2015-05-05
  • 多个js毫秒倒计时同时进行效果

    多个js毫秒倒计时同时进行效果

    这篇文章主要以实例的方式讲解多个js毫秒倒计时同时进行效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • js中net::ERR_FILE_NOT_FOUND报错的解决

    js中net::ERR_FILE_NOT_FOUND报错的解决

    本文主要介绍了js中net::ERR_FILE_NOT_FOUND报错的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vscode工具函数idGenerator使用深度解析

    vscode工具函数idGenerator使用深度解析

    这篇文章主要为大家介绍了vscode工具函数idGenerator使用深度解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • 在webstorm中配置less的方法详解

    在webstorm中配置less的方法详解

    这篇文章主要介绍了在webstorm中配置less的方法，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2020-09-09
  • JavaScript JMap类定义与使用方法示例

    JavaScript JMap类定义与使用方法示例

    这篇文章主要介绍了JavaScript JMap类定义与使用方法,涉及javascript类的定义、内部变量、函数的定义及使用相关操作技巧,需要的朋友可以参考下
    2019-01-01
  •  JavaScript 数据结构之散列表的创建(2)

     JavaScript 数据结构之散列表的创建(2)

    这篇文章主要介绍了 JavaScript 数据结构之散列表的创建，主要看如何处理散列值冲突的问题，并实现更完美的散列表。下文详细介绍需要的小伙伴可以参考一下
    2022-04-04
  • Javascript中的var_dump函数实现代码

    Javascript中的var_dump函数实现代码

    发现了一个非常好的JavaScript调试方法，目前看到的是可以打印Object/Array/Function/String四种类型，使用方法和PHP中的var_dump()一样，只要直接dump(变量名)即可。
    2009-09-09

最新评论