AJAX-DorpDownList

我也来发一个轻量级的AJAX 下拉菜单，通过AJAX动态加载数据

代码都很简单，有一些注释，简单测试了一下，没有什么问题，欢迎大家拍砖,这是我开博后的第一篇原创文章，当然了也查阅了一些资料！

希望对像我一样的菜鸟有所帮助。

 

服务端返回数据是JSON格式的数组对象：

 如果使用其他格式的数据结构，请修改js文件的第 94 和 95 行。

[{n:"名称",v:"值"}]

 

JS 文件的内容是：

 

///autoDropDownList
 
 ///获取对象
 $get = function(id,dom){
    if(dom != undefined){
        for(var i = 0; i < dom.childNodes.length;i++){
            if(dom.childNodes[i].id == id)
                return dom.childNodes[i];
        }
    }
    return document.getElementById(id);    
}
 ///创建对象
 $create = function(html){
    return document.createElement(html);    
}

 ///多级无刷新联动下拉列表类
///id:容器ID
///src:取得数据的页面,返回数据为json,格式为[{n:"",v:""}]
 function autoDropDownList(id,src){
    this.Contain = $get(id);
    this.Src = src;
    this.ValInput = $create("INPUT");
    this.ValInput.type = "hidden";
    this.ValInput.name = "val_"+id;
    this.Contain.appendChild(this.ValInput);
}

 ///创建下单列表(如果传入下拉菜单则表示被创建的是其下级列表)
 autoDropDownList.prototype.getDropDownList = function(ddl){
    var addl = this;
    var _s = $create("SELECT");
    _s.id = ("addl_"+Math.random()).replace(".","");
    _s.setAttribute("child","");
    
    if(ddl != null) ddl.setAttribute("child",_s.id);
    
    _s.onchange = function(){
        var s = this;
        var val = s.value;
        
        if(val.length == 0){addl.removeChild(s);return;}//如果值为空则删除子菜单并返回
         
        addl.ValInput.value = val;

        addl.loadDDL(val,s);
    };
    var _op = $create("OPTION");
    _op.text = "Load......";
    _s.appendChild(_op);
    
    return _s;
}

 ///取得传入下拉列表的下级下拉列表
 autoDropDownList.prototype.getChildDDL = function(ddl){
    if(ddl == null) return null;
    var cldid = ddl.getAttribute("child");
    if(cldid == null || cldid.length == 0) return null;
    return $get(cldid,this.Contain);
}

///加载列表项到列表
///id:上级数据
///ddl:上级下拉列表
autoDropDownList.prototype.loadDDL = function(id,ddl){
    var addl = this;
    
    var a = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    a.open("GET",addl.Src + "?id=" + id,true);
    a.onreadystatechange = function(){
        if(a.readyState == 4){
            var data = eval(a.responseText);
            if(data.length == 0) {addl.removeChild(ddl);return;}//如果值为空则删除子菜单并返回
            
            var c = addl.getChildDDL(ddl);

            var S = c == null ? addl.getDropDownList(ddl) : c;

            if(S.options.length > 0){
                while(S.options.length > 0) S.removeChild(S.options[0]);
            }
            
            addl.removeChild(S);
            
            var _op = $create("OPTION");
            _op.text = "SELECT";
            _op.value = "";
            S.options.add(_op);
            
            for(var i=0;i<data.length;i++){
                _op = $create("OPTION");
                _op.text = data[i].n;
                _op.value = data[i].v;
                S.options.add(_op);
            }
            
            addl.Contain.appendChild(S);
        }
    };
    a.send(null);
};

///删除下级列表
autoDropDownList.prototype.removeChild = function(ddl){
    if(ddl == null) return;
    var cldid = ddl.getAttribute("child");
    if(cldid == null || cldid.length == 0) return;
    
    var cld = $get(cldid,this.Contain);
    
    if(cld == null) return;
    
    try{
        this.removeChild(cld);
        this.Contain.removeChild(cld);
        ddl.setAttribute("child","");
    }catch(e){
        alert(e);
    }
}

 

 

HTML 页面使用方式：

 

<script type="text/javascript" src="AutoDropDownList.js"></script>

<form id="form1" name="form1" method="post" action="getDataItem.aspx">
         <div id="autoDropDownList"></div><!--列表容器-->
        <script type="text/javascript">
            var a = new autoDropDownList("autoDropDownList","getDataItem.aspx");//声明对象,第一个为容器ID，第二个为获取数据的url
            a.loadDDL(0);//加载第一级菜单,传入参数0，此参加将传递给获取值的页面：getDataItem.aspx?id=0
        </script>
          <input type="submit" name="button" id="button" value="提交" />
</form>

 

 

 

取得数据及获取值的页面：

 

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="utf-8" %>
<script language="c#" runat="server">
void Page_Load()
{
    if(Request.Form["val_autoDropDownList"] != null)
    {
        
        Response.Write("值:"+Request.Form["val_autoDropDownList"]);//获取值的表单名称是val_ + 容器id，也可以通过js文件第26行修改
        return;
    }
    string[][] items = new string[][]{
        new string[]{"0","1","OPTION-1"},
        new string[]{"0","2","OPTION-2"},
        new string[]{"0","3","OPTION-3"},
        new string[]{"0","4","OPTION-4"},
        new string[]{"1","5","OPTION-5"},
        new string[]{"1","6","OPTION-6"},
        new string[]{"1","7","OPTION-7"},
        new string[]{"2","8","OPTION-8"},
        new string[]{"2","9","OPTION-9"},
        new string[]{"2","10","OPTION-10"},
        new string[]{"3","11","OPTION-11"},
        new string[]{"3","12","OPTION-12"},
        new string[]{"3","13","OPTION-13"},
        new string[]{"10","14","OPTION-14"},
        new string[]{"10","15","OPTION-15"},
        new string[]{"10","16","OPTION-16"},
        new string[]{"10","17","OPTION-17"}
    };
    
    string pid = "0";
    
    if(Request.QueryString["id"] != null && Request.QueryString["id"].ToString().Length > 0)
        pid = Request.QueryString["id"].ToString();

    Response.Write("[");
    int i = 0;
    foreach(string[] s in items)
    {
        if(s[0] == pid)
        {
            if(i > 0) Response.Write(",");
            Response.Write("{v:'"+s[1]+"',n:'"+s[2]+"'}");
            i++;
        }
    }
    Response.Write("]");
    
    Response.End();
}
</script>