javascript動態追加下拉框及Java端接受新追加的下拉框引數
阿新 • • 發佈：2019-01-26
本文主要介紹javascript動態追加或減少下拉框，以及對應Java端接受新追加的下拉框引數。
------------------------------------------------------------------------------------【+ 效果 start】----------------------------------------------------------------------------------------------------
↓
↓
-------------------------------------------------------------------------------------- 【+ 效果 end】-----------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------【- 效果 start】----------------------------------------------------------------------------------------------------
↓
---------------------------------------------------------------------------------------【- 效果 end】----------------------------------------------------------------------------------------------------
後臺如何接受前端動態追加、減少的下拉框資料（通過request傳遞）：<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=GB2312" /> <style type="text/css"> td { white-space: nowrap; } </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function appendShiyoItemRow(obj, isAppendInRow) { var itemNum = $("#shiyoItemTd span").length; if (itemNum == 11) { alert("max length is 11. />"); return; } var sampleHtml = "<span id='shiyoItemSpan_" + (itemNum - 1) + "'>" + $("#shiyoItemSample").html() + "</span>"; var appendItems; if (isAppendInRow) { appendItems = $(sampleHtml).insertAfter($(obj).parent()); } else { appendItems = $(sampleHtml).insertBefore("#shiyoItemTd span:first"); } $(appendItems).find("*").each(function() { var id = $(this).attr("id"); if (!id) { return true; } $(this).attr("name", id.replace("[{0}]", "["+(itemNum - 1)+"]")); }); <span style="white-space:pre"> </span>//總記錄數 $("#shiyoItemENum").val(itemNum); } function deleteRow(obj) { var span = $(obj).parent(); var td = $(span).parent(); var spanNum = parseInt(span[0].id.split("_")[1]); $(span).remove(); var allNum = td.find("span").length; for (var i = spanNum + 1; i < allNum; i++) { var spanTag = $(td).find("#shiyoItemSpan_" + i); spanTag.attr("id", "shiyoItemSpan_" +spanNum); spanTag.find("*").each(function() { var tagName = $(this).attr("name"); if (!tagName) { return true; } $(this).attr("name", tagName.replace("["+i+"]", "["+spanNum+"]")); }); spanNum++; } } </script> </head> <body> <table border="1" cellpadding="0" cellspacing="0" style="overflow-y:hidden;"> <input type="hidden" name="shiyoItemENum" id="shiyoItemENum" value="${ requestScope.shiyoItemENum }" /> <tr> <td colspan="4" style="border-bottom: 0px;border-right: 0px;"> 動態加減下拉框： <button type="button" onclick="appendShiyoItemRow(this, false);">+</button> </td> </tr> <tr> <td style="border-top: 0px;" colspan="4" id="shiyoItemTd"> <span id="shiyoItemSample" style="display: none;"> <select id="jd[{0}].shiyoItemCd" > <option>aa</option> <option>bb</option> <option>cc</option> </select> <select id="jd[{0}].shiyoJokenCd"> <option>11</option> <option>22</option> <option>33</option> </select> <input type="text" id="jd[{0}].shiyoValue" maxlength="25"/> <button type="button" onclick="appendShiyoItemRow(this, true);">+</button> <button type="button" onclick="deleteRow(this);">-</button> <br /> </span> </td> </tr> </table> </body> </html></span>
public search(){
List<ShiyochiJokenDto> shiYoConditions = new ArrayList<ShiyochiJokenDto>();
// 仕様專案條件リストを作成する
boolean isEL = "1".equals(dto.getShiyoCdSettei());
String kbn = "3";
if (isEL) {
kbn = "2";
}
int cNum = 0;
cNum = convertToInt(req.getParameter("shiyoItemENum"));
String itemCdNamePattern = "jd[%d].shiyoItemCd";
String conditionCdPattern = "jd[%d].shiyoJokenCd";
String conditionValuePattern = "jd[%d].shiyoValue";
int seqNo = 1;
for (int i = cNum - 1; i >= 0; i--) {
ShiyochiJokenDto sd = new ShiyochiJokenDto();
// ユーザーID
sd.setUserid(userId);
// 連番
sd.setSeqNo(seqNo);
// 區分
sd.setKbn(kbn);
// 仕様專案コード
sd.setShiyoItemCd(req.getParameter(String.format(itemCdNamePattern, i)));
// 仕様專案條件コード
sd.setShiyoJokenCd(req.getParameter(String.format(conditionCdPattern, i)));
// 仕様專案値
sd.setShiyoValue(req.getParameter(String.format(conditionValuePattern, i)));
// 登録者
sd.setTorokuJid(userId);
shiYoConditions.add(sd);
seqNo++;
}
}