效果圖：

實現功能：新增行，二級聯動，對新增行進行操作。

相關程式碼：

<table border="1" width="60%" align="center" class="role_select">
                        <thead>

<tr><td><a class="button blueButton" onclick="addRow()" >新增抄送人</a></div></td> </tr>
                            <tr>
                                <th style="text-align: center;">部門</th>
                                <th style="text-align: center;">角色</th>
                                <th style="text-align: center;">操作</th>
                            </tr>
                        </thead>
                        <tbody id="tBody">
                        </tbody>
                    </table>

JS:

//新增抄送人
    var rols,son_accounts;
    $(function(){
        $.ajax({
            url:'${ctx}/api/reimbursement/expense!chooseCopierDepartment.do',
            dataType:'json',
            success:function(result){
                rols="<option value=''>---請選擇---</option>";
                /* rols+="<option value='153'>總部</option>"; */
                if(result.result==1)
                    $.each(result.data,function(index,item){
                        rols+="<option value='"+item.department_id+"'>"+item.department_name+"</option>";
                    })
            },
            error:function(){
                alert("出錯了");
            }
        });
    });
    
    function roleChange(obj){
        //debugger;
        //var id=$("#department").val();
        var flag=false;
        /* if(!id){
            alert("請選擇部門");
            return;
        } */
        if($(obj).val()==''){
            $(obj).parent().next().children().html('');
            return;
        }
        var id=$(obj).val();
        son_accounts="";
        $.ajax({
            url:'${ctx}/api/reimbursement/expense!chooseCopier.do?dep_id='+id,//二級聯動的url
            dataType:'json',
            success:function(result){
                if(result.result==0){
                    alert(result.message);
                    $("#memberids").val("");
                }
                if(result.result==1){
                    $.each(result.data,function(index,item){
                        son_accounts+="<option value='"+item.id+"'>"+item.name+"</option>";
                    })
                $(obj).parent().next().children().html(son_accounts);
                }},
            error:function(){
                alert("出錯了");
            }
        });
    }
    
    function addRow(){
        if(rols){
            var strTr="<tr><td><select id='memberids' name='memberids' onchange='roleChange(this)'>"+rols+"</sclect></td><td><select name='son_member_id'></sclect></td><td><a onclick='del(this)' href='javascript:void(0)'>刪除</a></td>";
            $("#tBody").append(strTr);
        }else{
            alert("請求超時");
        }
    }
    
    function save(){
        if(!$("#addForm").form().form('validate')){
            return ;
        }
        debugger;
        $("#departmentName").val($("#department").find("option:selected").text());
        var copiers="";
        var copierIds="";
        var ids=$("#tBody select[name='son_member_id']");
        $.each(ids,function(index,item){
            if(index==ids.size()-1)
                copiers+=$(item).find('option:selected').text();
            else
                copiers+=$(item).find('option:selected').text()+",";
        });
        $.each(ids,function(index,item){
            if(index==ids.size()-1)
                copierIds+=$(item).find('option:selected').val();
            else
                copierIds+=$(item).find('option:selected').val()+",";
        });
        console.log(copiers);
        $("#copiers").val(copiers);
        $("#copierIds").val(copierIds);
       
        
        var formflag = $("#addExpenseApply").form().form('validate');
        if (formflag) {
            $.Loading.show("<@uiLabel text='warehouseAdd.Adding'/>......");/*正在新增*/
            var options = {
                url : "**************************?ajax=yes",//提交到後臺url
                type : "POST",
                dataType : 'json',
                success : function(result) {
                    if (result.result == 1) {
                        $.Loading.success(result.message);
                        window.location.href = "${ctx}/reimbursement/expense_apply_list.html";
                    }
                    if (result.result == 0) {
                        $.Loading.error(result.message);
                    }
                },
                error : function(e) {
                    alert("<@uiLabel text='warehouseAdd.chuxiancuowu'/>");/*出現錯誤 ，請重試*/
                }
            };
            $("#addExpenseApply").ajaxSubmit(options);
        }
        
    }
   
    //刪除行
    function del(obj){
        var tr=obj.parentNode.parentNode;
        var tBody=tr.parentNode;
        tBody.removeChild(tr);
    }