动态添加DropDownList，并用Ajax实现部门—

动态添加DropDownList，并用Ajax实现部门——岗位的二级联动

有些时候我们需要在页面动态添加控件，这时我们就要用到的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();
            }
        }