<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，最终效果如下：
