asp.net 动态创建DIV

需求：用户添加角色时，需要添加兼职。兼职角色，动态添加。角色信息从数据库中读取。

前台代码：动态添加

<div title="兼职">
<div id="divAddElseRole">
<div style="margin-top: 10px;">
<label style="margin-left: 55px;">所属组织:</label>
<label id="currentAddOrganization">教育学院</label>
<label style="margin-left: 85px;">当前角色:</label>
<label id="currentAddRole">管理员</label>
<a href="#" class="easyui-linkbutton" style="margin-left: 90px;" data-options="plain:true" onclick="AddElseRole()">【添加兼职】</a>
<hr />
</div>
</div>
</div>
//添加用户时，添加兼职
function AddElseRole() {
//获得现有的下拉框
var ElseRoles = document.getElementsByClassName("selectElseRoles");
//如果没有下拉框，则select从0开始编号
var roleData;
var message = document.getElementById("WarnMessage");
if (ElseRoles.length == 0) {
$("#divAddElseRole").append("<div style='margin-top:5px;margin-bottom:5px;'><label style='margin-left:60px;'>兼职角色</label> <select class='selectElseRoles' id ='selectElseRole1' style='width:134px;height:20px;margin-left:110px;' onchange='changeElseRole(this)'></select>  <a style='margin-left:85px;cursor:pointer' onclick='DeleteElseRole(this)'>【删除】</a>  <hr /></div>");
$('#selectElseRole1').empty();
$('<option value=\"0\">请选择</option>').appendTo($('#selectElseRole1'));
$.ajax({
url: "/User/LoadItemsRole",
dataType: "json",
data: { userId: userId },
success: function (data) {
$.each(data, function (i, item) {
roleData = data;
$("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($('#selectElseRole1'));
});
}
});
} else {
//如果上一个下拉框没有选择兼职，则不让其添加下一个下拉框
if (ElseRoles[ElseRoles.length - 1].selectedIndex == 0) {
message.innerHTML = "<span style='font-size: 15px'>请选择兼职！</span>";
$("#dlgWarn").dialog("open");
return;
};
//添加的下拉框的编号。从最后一个下拉框开始累加
var intBianHao = parseInt(ElseRoles[ElseRoles.length - 1].id.substring(14));
var bianhao = (intBianHao + 1).toString();
$("#divAddElseRole").append("<div style='margin-top:5px;margin-bottom:5px;'><label style='margin-left:60px;'>兼职角色</label> <select class='selectElseRoles' id ='selectElseRole" + bianhao + "' style='width:134px;height:20px;margin-left:110px;' onchange='changeElseRole(this)'></select>  <a style='margin-left:85px;cursor:pointer' onclick='DeleteElseRole(this)'>【删除】</a>  <hr /></div>");
var selectElseRoleId = "selectElseRole" + bianhao;
$('#' + selectElseRoleId).empty();
$('<option value=\"0\">请选择</option>').appendTo($('#' + selectElseRoleId));
$.ajax({
url: "/User/LoadItemsRole",
dataType: "json",
data: { userId: userId },
success: function (data) {
$.each(data, function (i, item) {
$("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($('#' + selectElseRoleId));
});
}
});
};
}

动态删除：
//删除兼职
function DeleteElseRole(o) {
o.parentNode.parentNode.removeChild(o.parentNode);
}
用户信息存到数据库：

//点击保存，将用户添加到数据库中
function saveAddUser() {
var userLoadName = (document.getElementById('userAddLoadName').value).trim();
var userRealName = (document.getElementById('userAddRealName').value).trim();
var userPassword = (document.getElementById('userAddPassword').value).trim();
var userOrganization = document.getElementById("selectOrganizationId").value;
var selectUserRole = document.getElementById('selectAddUserRole').value;
var userTel = document.getElementById('userAddTel').value;
var userEmail = document.getElementById('userAddEmail').value;
var userElseRoles = document.getElementsByClassName("selectElseRoles");
var userElseRole = "";
if (userElseRoles.length <= 0) {
userElseRole = "";
} else {
for (var i = 0; i < userElseRoles.length; i++) {
userElseRole += userElseRoles[i].value + ",";
};
};
var message = document.getElementById("DataGridMessage");
$.ajax({
type: "post",
url: "/User/AddUser/",
data: { "userLoadName": userLoadName, "userRealName": userRealName, "userPassword": userPassword, "userOrganization": userOrganization, "userTel": userTel, "userEmail": userEmail, "selectUserRole": selectUserRole, "userElseRole": userElseRole },
traditional: true,
success: function (isAdd) {
if (isAdd) {
$('#dlgAddUser').dialog('close');
//$('#dg').datagrid('reload');

message.innerHTML = "<span style='font-size: 15px'>添加成功！</span>";
$("#dlgDataGrid").dialog("open");
} else {
message.innerHTML = "<span style='font-size: 15px'>添加失败！</span>";
$("#dlgDataGrid").dialog("open");
}
}
});
}

#region 添加用户
public bool AddUser()
{
//通过工厂获得用户服务接口
IUser iuser = ServiceFactory.GetUserService();
IAllUser iAllUser = ServiceFactory.GetAllUserService();

string schoolNo = "144421";
string systemName = "authority";

//实例化用户实体
User user = new User()
{
UserId = System.Guid.NewGuid(),
UserName = Request["userLoadName"],
RealName = Request["userRealName"],
Password = Request["userPassword"],
OrgId = new Guid(Request["userOrganization"]),
Tel = Request["userTel"],
Email = Request["userEmail"]
};
string selectUserRole = Request["selectUserRole"];
string userRoleId = Request["userElseRole"];
string[] userRoleIds;
if (userRoleId != "")
{
userRoleIds = userRoleId.Split(',');
}
else
{
userRoleIds = null;
};
iAllUser.Add(user, schoolNo, systemName);
bool isAdd = iuser.AddUser(user, selectUserRole, userRoleIds);

return isAdd;
}
#endregion

效果图：