页面新增加项，删除项的实现

效果预览

部分jsp代码：

<form id="protectionApplyItem" name="" method="post" action="permodular/companySealApply/apply.do"
onsubmit="return checkNumbers()">
<label for="processDefinitionKey" style="margin-right:30px;">
<span>选择流程</span>
<select id="processDefinitionKey" name="processDefinitionKey">
<c:forEach items="${processes }" var="process">
<option value="${process.key }" <c:if test='${process.key == "zzsqlc" }'>selected="selected"</c:if>>
${process.name }
</option>
</c:forEach>
</select>
</label>
<input class="myButton" type="button" id="addApplyItem" value="添加项">
<input class="myButton" type="button" id="del" value="删除项">
<hr>
<div id="addItemList">
<input type="checkbox" name="check"/>
<div class="addItem">
<label for="type">
<span>证章名</span>
<select class="qulificationId" name="qulificationId" id="qulificationId0">
</select>
<!-- <select name="selectSecond" id="selectSecond0">
</select> -->
      </label><br/>
      <!-- <label for="number0">
        <span>数量</span>
        <input id="number0" name="number" type="text">
      </label> -->
</div>
        <hr/>
    </div>
    <label for="applyReason">
        <span>申请原因</span>
     <input id="applyReason" name="applyReason">
    </label>
    <br/>
    <label for="remarks">
        <span>备注</span>
     <textarea rows="4" cols="50" id="remarks" name="remarks" style="vertical-align:top;"></textarea>
    </label>
    <br/>
  <!--   <button class="mySave" type="button" id="addApplyItem">添加</button> -->
    <input class="myButton" type="submit" id="submit" value="申请"/>
   <!--  <button class="mySave" type="button" id="del">删除</button> -->
</form>

js实现增加项，删除项

//新加区域的内容
var row='<input type="checkbox" name="check"/>'+
        '<div class="addItem">'+
            '<label for="type">'+
                '<span>资质名</span>'+
                '<select class="qulificationId" name="qulificationId"></select>'+
        '</div>'+
        '<hr>';
//默认区域只有1个，此参数用于区域的id后缀
var count = 1;
//初始化数据，下拉选项，在ajax中对此数据进行更新
var initQualificationData = "";
//创建新的条目，并为新的条目设立唯一的id
function create(count){
    $("#addItemList").append(row);
    var newAddItem = $("#addItemList").find(".addItem").last();
    newAddItem.find('select').eq(0).attr("id","qulificationId"+count);
    newAddItem.find('select').eq(0).append(initQualificationData);
}

//初始第一条目以及新条目出来后，数据的初始化
function initData(){
    var qualificationName = $(".addItem").find("select").eq(0);
    qualificationName.find("option").remove();
    qualificationName.append(initQualificationData);
}



$(function(){
    //初始化数据
    $.ajax({
        type : "POST",
        url : "admmodular/companySeal/noFilterGetCompanySealList.do",
        success : function(result) {
            //循环遍历得到的模块名称，动态添加到html中
            var results = eval("("+result+ ")");

            //类型下拉列表
            for (var i = 0; i < results.list.length; i++) {
                initQualificationData +='<option name="qulificationId" value="'+results.list[i].id+'" >'+results.list[i].sealName+'</option>'
            }
            initData();
        }
    })

    //增加新的条目
    $('#addApplyItem').click(function(){
        create(count);
        count=count+1;
    })
    //删除多余的条目，这里使用了layer插件
    $('#del').click(function(){
        var length=$('input:checked').length;
        if(length == 0){
            layer.alert("请选择需要删除的内容");
            return;
        }else{
            layer.confirm('是否确认删除？', {
                  btn: ['确认','取消'] //按钮
                }, function(){
                    for(var i=0;i<length;i++){
                        $('input:checked').eq(0).next('.addItem').remove();
                        $('input:checked').eq(0).next('hr').remove();
                        $('input:checked').eq(0).remove();
                    }
                    layer.closeAll();
                }, function(){
                    $('input:checked').attr("checked",false);
            });

        }

    }); 
})

后台对数据的处理：

/**
 * 申请操作
 * @param processDefinitionKey
 * @param qulificationId
 * @param applyReason
 * @param remarks
 * @param request
 * @param response
 * @return
 */
@RequestMapping("apply")
public String apply(String processDefinitionKey,int[] qulificationId,String applyReason,
        String remarks,HttpServletRequest request,HttpServletResponse response){
    User user = (User) request.getSession().getAttribute(Constants.LOGIN_USER);
    CompanyQualificationApply companyQualificationApply = new CompanyQualificationApply();
    companyQualificationApply.setApplyDate(new Date());
    companyQualificationApply.setApplyReason(applyReason);
    companyQualificationApply.setRemarks(remarks);
    companyQualificationApply.setState(1);//行政审批中
    companyQualificationApply.setUserId(user.getId());

    List<CompanyQualificationApplyItem> CompanyQualificationApplyItems = new ArrayList<CompanyQualificationApplyItem>();
    try {
        for (int i = 0; i < qulificationId.length; i++) {
            CompanyQualificationApplyItem personalLabourProtectionApplyItem = new CompanyQualificationApplyItem();
            personalLabourProtectionApplyItem.setQualificationId(qulificationId[i]);
            //申请单号这里无法设置，在service中补上
            CompanyQualificationApplyItems.add(personalLabourProtectionApplyItem);
        }

        companyQualificationApplyService.submit(companyQualificationApply, CompanyQualificationApplyItems, request,
                    runtimeService, taskService, processDefinitionKey);
    } catch (Exception e) {
        ExceptionHandler.handle(logger, e, "劳保申请失败！");
    }
    return "redirect:applyHistory.do?page=1&size=10";   
}