有些时候我们需要在页面动态添加控件，这时我们就要用到的JS的createElement功能创建标签。如果我们插入DropDownList的话就要绑定信息，以便用户可以选择。很多时候DropDownList的信息是从数据库中读取的，并动态绑定的，这样我们就要使用ajax来实现，在页面无刷新的状态下插入绑定数据的控件。数据的绑定使用XML遍历进行，除此之外还有一种方法，该方法不需要使用JQuery遍历XML节点，点击链接查看http://www.cnblogs.com/zhongweiv/archive/2011/10/29/JqueryCallBack.html
前台代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <script type="text/javascript" language="javascript"> //获取值
function getvalue() { var list = ""; var post = document.getElementById("up").getElementsByTagName("select"); for (i = 0; i < post.length; i++) { if (post[i].name == "ddlpost" && post[i].value != "-2") list = list + post[i].value + ","; } document.getElementById("hfpost").value = list; } </script> </head> <body> <form id="form1" runat="server"> <asp:HiddenField ID="hfpost" runat="server" /> <div> <div id="up"> </div> <asp:Button ID="btn_addbusiness" runat="server" class="buttonAdd" OnClientClick=" return adddroplist('up')" Style=" 60px; background-repeat: no-repeat;" Text="添加" /> </div> </form> </body> </html>
页面中“添加”按钮通过adddroplist的方法在ID为“up”的层里添加控件；其中adddroplist方法可以写在特定的JS文件里，减少页面中的JS代码量。
JS代码：
var num = 1; function adddroplist(id) { var d = document.createElement("div"); var op = new Option("--请选择--", -2); //添加部门选择 var n = document.createElement("select"); n.setAttribute("name", "ddldep" + num); n.setAttribute("id", "ddldep" + num); n.onchange = function () { BindToDep(this.options[this.selectedIndex].value, this, 2); } n.options.add(op); d.appendChild(n); //添加职务选择 op = new Option("--请选择--", -2);//必须再写一遍，不然报错，具体原因不知道 var m = document.createElement("select"); m.setAttribute("name", "ddlpost"); m.setAttribute("id", "ddlpost" + num); m.options.add(op); d.appendChild(m); //添加删除按钮 var b = document.createElement("input"); b.setAttribute("type", "button"); b.style.cssText = "45px;border:0;background-color:#f1f9fe;color:Blue;cursor:hand;";//为保证IE下不显示按钮边框 b.setAttribute("value", "[删除]"); b.onclick = function () { return delfile(this); } d.appendChild(b); document.getElementById(id).appendChild(d); BindToDep(1, "ddldep" + num, 1); num = num + 1; return false; } //绑定获取信息 function BindToDep(pid, depid, flag) { //判断部门还是岗位,部门时传递的是ID，岗位时传递的是部门控件元素 if (flag == 2) { var post = depid.id.substring(depid.id.length - 1, depid.id.length); post = "ddlpost" + post; } else post = depid; post = document.getElementById(post); $.ajax( { url: "CS.aspx?depid=" + pid, type: "post", async: false, dataType: "html", error: function () { if (flag != 2) { delfile(post); alert("添加失败"); } }, success: function (data) { //将返回的HTML信息转换为XML信息 if (typeof data == "string") { xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.loadXML(data); } else { xml = data; } post.length = 0; post.options.add(new Option("--请选择--", -2)); //JQuery遍历XML节点 $(xml).find("root").each(function () { $(this).find("DepInfo").each(function () { text = $(this).find("DepName").text(); value = $(this).find("DepID").text(); post.options.add(new Option(text, value)); }); }); } }); } function delfile(f) { while (f.tagName != "DIV") f = f.parentNode; f.parentNode.removeChild(f); return false; }
CS页面后台代码：
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { StringBuilder str = new StringBuilder(); string depid = Request.QueryString["depid"] == null ? "-2" : Request.QueryString["depid"].ToString(); DataView dv = (new SysDep()).GetDepInfoByPID(Convert.ToInt32(depid)); if (dv.Count > 0) { str.Append("<root>"); for (int i = 0; i < dv.Count; i++) { str.Append("<DepInfo>"); str.Append("<DepName>" + dv[i]["DepName"].ToString() + "</DepName>"); str.Append("<DepID>" + dv[i]["DepID"].ToString() + "</DepID>"); str.Append("</DepInfo>"); } str.Append("</root>"); } Response.Write(str.ToString()); Response.End(); } }