JS下拉框实现省市联动

效果图：


选择省份匹配城市：

给定省份和城市

思路：

• 省份数组下标对应相应的城市
• 循环设置省份列表
• selectCity()根据参数pro得到省份下标设置城市列表var index=pro.selectedIndex-1;
• 已知省份：设置selected，根据下标得出所有城市列表
• 已知省份，城市：根据已知省份的下标，得出所有对应城市，查找已知城市，设置selected if (citys[index][i]==cs){var sel="selected";}

HTML代码：（只有部分省份城市）

<script src="city.js"></script>
<script>
    selectInfo("pro","cit","山东","聊城");
    //山东和聊城为可选，也可更改
</script>

JS代码：

    var province=['江苏','北京','天津','上海','重庆','广东','浙江','福建','湖南',
        '湖北','山东','辽宁','吉林','云南','四川','安徽'];
    var citys=new Array(
        new Array('南京','苏州','无锡','常州','镇江','连云港 ','扬州','徐州 ','南通','盐城','淮阴','泰州','宿迁'),
        new Array('东城区','西城区','崇文区','宣武区','朝阳区','海淀区','丰台区','石景山'),
        new Array('和平','河北','河西','河东','南开','红桥','塘沽','汉沽','大港','东丽','西青','津南','北辰','武清','滨海'),
        new Array('宝山','金山','南市','长宁','静安','青浦','崇明','卢湾','松江','奉贤','浦东','杨浦','虹口','普陀','闸北','黄浦','闵行','徐汇','嘉定','南汇'),
        new Array('渝中','江北','沙坪坝','南岸','九龙坡','大渡口'),
        new Array('广州','珠海','中山','佛山','东莞','清远','肇庆','阳江','湛江','韶关','惠州','河源','汕尾','汕头','梅州'),
        new Array('杭州','湖州','丽水','温州','绍兴','舟山','嘉兴','金华','台州','衢州','宁波'),
        new Array('福州 ','厦门 ','泉州 ','漳州 ','龙岩 ','南平 ','宁德 ','莆田 ','三明'),
        new Array('长沙','株州','湘潭','衡阳','邵阳','岳阳','常德','郴州','益阳','永州','怀化','娄底','湘西 '),
        new Array('武汉','黄石','十堰','荆州','宜昌','襄樊','鄂州','荆门','孝感','黄冈','咸宁','恩施','随州','仙桃','天门','潜江','神农架'),
        new Array('济南','青岛','淄博','德州','烟台','潍坊','济宁','泰安','临沂','菏泽','威海','枣庄','日照','莱芜','聊城','滨州','东营'),
        new Array('沈阳','大连','鞍山','锦州','丹东','盘锦','铁岭','抚顺','营口','辽阳','阜新','本溪','朝阳','葫芦岛'),
        new Array('长春','吉林','四平','辽源','通化','白山','松原','白城','延边'),
        new Array('昆明','东川','曲靖','玉溪','昭通','思茅','临沧','保山','丽江','文山 ','红河 ','西双版纳 ','楚雄 ','大理 ','德宏 ','怒江','迪庆'),
        new Array('成都','自贡','攀枝花','泸州','德阳','绵阳','广元','遂宁','内江','乐山','南充  ','宜宾','广安','达川','巴中','雅安','眉山  ','阿坝 ','甘孜 ','凉山 '),
        new Array('合肥  ','芜湖 ','蚌埠 ','滁州 ','安庆 ','六安 ','黄山 ','宣城 ','淮南 ','宿州 ','马鞍山 ','铜陵','淮北 ','阜阳 ','池州 ','巢湖 ','亳州')
    );
    function selectInfo(pro,cit,sf,cs) {
        var a=0;
        document.write('<select οnchange="selectCity(this)" id="pro" name="'+pro+'">');
        document.write('<option>--请选择省份--</option>');
        for(var i=0;i<province.length;i++){
            if(typeof(sf)!="undefined"){ 
                if (province[i]==sf){
                    var sel="selected";
                    a=i;
                } else {
                    var sel="";
                 }
            }else{
                var sel="";
             }
            document.write('<option '+sel+' value="'+province[i]+'">'+province[i]+'</option>');
        }
        document.write('</select>');

        document.write('<select id="city" name="'+cit+'">');
        document.write('<option>--请选择城市--</option>');
        document.write('</select>');
        if (a>0) {
            selectCity(document.getElementById("pro"), a, cs);
        }
}
function selectCity(pro,a,cs) {
    if(typeof (a)!="undefined"){
        var index=a;
    }else{
        var index=pro.selectedIndex-1;
    }
    var cit=document.getElementById("city");
    cit.innerHTML="";
    if(index>=0){
        for (var i=0;i<citys[index].length;i++){
            if (typeof (cs)!="undefined"){
                if (citys[index][i]==cs){
                    var sel="selected";
                } else{
                    var sel="";
                }
            }
            var option=document.createElement("option");
            var text=citys[index][i];
            option.selected=sel;
            option.value=text;
            option.innerHTML=text;
            cit.appendChild(option);
        }
    }else {
        var option=document.createElement("option");
        option.value="";
        option.innerHTML="--请选择城市--";
        cit.appendChild(option);
    }
}