本文主要介绍javascript动态追加或减少下拉框,以及对应Java端接受新追加的下拉框参数。
------------------------------------------------------------------------------------【+ 效果 start】----------------------------------------------------------------------------------------------------↓
↓
--------------------------------------------------------------------------------------【+ 效果 end】-----------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------【- 效果 start】----------------------------------------------------------------------------------------------------
↓
---------------------------------------------------------------------------------------【- 效果 end】----------------------------------------------------------------------------------------------------
<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" οnclick="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" οnclick="appendShiyoItemRow(this, true);">+</button>
<button type="button" οnclick="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++;
}
}