<html>
<head>
<title>首页</title>
<link type="text/css" rel="stylesheet" href="${ctx}/resource/user/css/style.css">
<!-- 引入 Bootstrap -->
<link href="${ctx}/resource/js/bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="${ctx}/resource/user/js/jquery-1.8.3.min.js"></script>
<script src="${ctx}/resource/user/js/jquery.luara.0.0.1.min.js"></script>
</head>
<body>
<!--测试使用-->
<div class="container">
<h2>车型折扣配置</h2>
<form action="#">
<div class="input-dyna-add">
<div class='form-group'>
<label class="col-sm-1 control-label">车型：</label>
<div class="col-sm-2">
<select class="form-control" name="search_cityId">
<option value="">畅享型</option>
<c:forEach var="city" items="${cities}">
<option value="${city.id}"<c:if test="${param.search_cityId == city.id}">selected</c:if> >${city.name}
</option>
</c:forEach>
</select>
</div>
<label class="col-sm-1 control-label">折扣：</label>
<div class="row">
<div class="col-sm-3">
<input type="text" class="form-control" name="desc[]" placeholder="请输入折扣，最大为1，不能小于0。">
</div>
<button class='removeclass btn btn-danger' type='button'><span>删除</span></button>
</div>
</div>
</div>
<input class='btn btn-info' type="button" onclick="addInput()" value="+添加"/><br/><br/>
<input class='btn btn-primary btn-lg' type="button" onclick="getValue()" value="保存"/>
</form>
</div>
<script>
function addInput() {
var input = $("<div class='form-group'><label class='col-sm-1 control-label'>车型：</label><div class='col-sm-2'><select class='form-control' name='search_cityId'><option value=''>畅享型</option><c:forEach var='city' items='${cities}'><option value='${city.id}'<c:if test='${param.search_cityId == city.id}'>selected</c:if> >${city.name}</option></c:forEach></select></div><label class='col-sm-1 control-label'>折扣：</label><div class='row'><div class='col-sm-3'><input type='text' class='form-control' name='desc[]' placeholder='请输入折扣，最大为1，不能小于0。'></div><button class='removeclass btn btn-danger' type='button'><span>删除</span></button></div></div>");
// append 表示添加在标签内， appendTo 表示添加在元素外尾
$(".input-dyna-add").append(input);
}
function getValue() {
var valArr = new Array;
$("input[name='desc[]']").each(function (index, item) {
valArr[index] = $(this).val();
var priv = valArr.join(',');
alert(priv);
});
// console.log(desc);
}
$("body").on("click", ".removeclass", function (e) {
// remove text box
$(this).parent('div').parent('div').remove();
return false;
})
</script>
<%@include file="/common/ufooter.jsp" %>
<script src="${ctx}/resource/js/bootstrap-3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
实现效果如下：
这个demo后来在实际使用中做了优化，使用了layui框架，并且把每行的添加定义成一个隐藏的div，最终效果如下：
扫一扫
2232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
