级联列表

<script>
            var proArr=['北京','重庆','浙江','贵州','河北'];
            var cityArr=new Array(
                new Array('海淀区','丰台区','西城区','东城区','朝阳区','房山区'),
                new Array('江北区','沙坪坝区','九龙坡区','南岸区'),
                new Array('杭州','金华','嘉兴','绍兴'),
                new Array('贵阳市','安顺市','遵义市','铜仁市'),
                new Array('石家庄市','唐山市','承德市','张家口市','保定市','邯郸市')
            );
            function getCity(pro,city){
                document.write("<div class='wrap'>");
                document.write("<div class='proDiv'>");
                document.write("<select name='proSel' onChange='Change(this)';>");
                document.write("<option value='0'>请选择省份</option>");
                for(var i=0;i<proArr.length;i++){
                    document.write('<option value='+'(i+1)'+'>'+proArr[i]+'</option>');
                }
                document.write("</select>");
                document.write("</div>");
                
                document.write("<div class='cityDiv'>");
                document.write("<select name='citySel'>");
                document.write("<option value='0'>请选择城市</option>");
                document.write("</select>")
                document.write("</div>");
                
                document.write("</div>");
            }
            function Change(obj){
                var city=document.getElementsByName("citySel")[0];
                var index=obj.selectedIndex-1;//selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。注意： 若允许多重选择，则仅会返回第一个被选选项的索引号。
                //设置 selectedIndex 属性：selectObject.selectedIndex=integer;   返回 selectedIndex 属性：selectObject.selectedIndex 
                city.innerHTML="";
                for(var i=0;i<cityArr[index].length;i++){
                    var op=document.createElement("option");//创建option节点
                    op.value=i;
                    op.text=cityArr[index][i];
                    city.appendChild(op);//将option节点添加到city中
                }
            }
            getCity();
        </script>

css样式：

<style>
            *{margin:0;padding:0;}
            .wrap{width:300px;margin:20px auto;}
            .proDiv{width:120px;float:left;margin-right:10px;}
            .cityDiv{width:120px;float:left;}
            select{line-height:30px;width:120px;height:30px;}
            select option{height:30px;line-height: 30px;}
        </style>