bootstrap 下拉多選框進行多選傳值問題代碼分析

2019-11-19 17:35:12

字體：大中小

來源：轉載

供稿：網友

項目開發遇到個問題，就是引入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>

這樣就好了。。