html实现二级联动

html实现二级联动

直接上代码！

body的代码

<script>

    var one=document.getElementById("one");
    var two=document.getElementById("two");
    var t1=['北京','上海','天津'];
    /*定义成二维数组*/
    var t2=[['东城区','海淀','朝阳'],['黄浦江','1'],['东丽','滨海区']];
    /*先输出第一个复选框*/
    one.innerHTML="";
    for(var i=0;i<t1.length;i++){
        one.innerHTML+="<option>"+t1[i]+"</option>";
    }
    /*默认输出第一个对应的内容*/
    for(var i=0;i<t2[0].length;i++){
        two.innerHTML+="<option>"+t2[0][i]+"</option>";
    }
    /*定义onchange事件 根据index输出对应的内容*/
    one.onchange=function(){
        var index=this.selectedIndex;
        two.innerHTML="";
        for(var i=0;i<t2[index].length;i++){
            two.innerHTML+="<option>"+t2[index][i]+"</option>";
        }
    }
</script>

有什么疑问评论留言!