用javascript做多级菜单

在注册页面,我们常常需要用到多级下拉选项,例如选择地址是选择北京后二级菜单自动显示北京的各个区,这里通过javascript实现这个功能:

html部分:

<p>
    省级:
    <select id="provice">
    </select>
</p>
<p>
    市级:
    <select id="city">
    </select>
</p>

代码的主要思路:

1 先建立一个对象,里面有一个省信息的数组和一个市信息的数组,省信息的code对应市信息的数组下标

2 写一个动态下拉菜单选项的函数

3为一级菜单建立所有省份的选项

4 取出所选的下拉选项的code值

5删除二级菜单的所有选项

6根据code值,添加市级信息里下标为code的所有元素添加下拉选项

具体代码如下:(我地理不太好,忘记了天津有哪个区,凭印象写的)

 var linkdata={
        provice:[
            {
                "code":"0",
                "name":"请选择",
            },
            {
                "code":"1",
                "name":"北京",
            },
            {
                "code":"2",
                "name":"天津",
            }
        ],
        city:{
            0:[
                "select",
            ],
            1:[
                "朝阳",
                "海淀",
                "昌平",
                "其他",
            ],
            2:[
                "石家庄",
                "秦皇岛",
            ]
        }
    }

    function addoption(taeget,opetion) {

        var test=document.getElementById("provice");
        var select=document.createElement("OPTION");
        select.value="value";
        select.text="text";
        test.options.add(select);
        var o=null;
        var ol=opetion.length;
        var i=0;
        var v="";
        var t="";
        for(;i<ol;i++)
        {
            v=opetion[i].value;
            t=opetion[i].text;
            o=document.createElement("OPTION");
            o.value=v;
            o.text=t;
            taeget.options.add(o);
        }

    }
    function linkage(p1,c1) {
        var l=linkdata;
        var p=l.provice;
        var c=l.city;
        var ic=c[0];
        var _p=[];
        for(var i in p){
            _p.push({
                "text":p[i].name,
                "value":p[i].code,
            })
        }

        addoption(p1,_p);
        addoption(c1,[{
            "value":ic,
            "text":ic
        }]);
        p1.onchange=function () {
            //删除旧的选项
            var remove=document.getElementById("city");
            var r=remove.options.length;
            for(var i=0;i<r;i++){
                if(remove.options){
                    remove.options.remove(remove.options[i]);
                }
            }
            var child=c[this.value];
            var childlen=child.length;
            var j=0;
            var __p=[];
            child.innerHTML="";
            for(;j<childlen;j++){
               __p.push({
                    "value":child[j],
                    "text":child[j]
                })
            }
            addoption(c1,__p);
        }


    }
    linkage(
        document.getElementById("provice"),
        document.getElementById("city")
    );

}