省份与城市选择的js代码(简单实用版)

发布时间:2019-07-19编辑:脚本学堂
本文介绍下,原生javascript实现的省市选择的代码,有需要的朋友参考下。

以下代码,可以实现省份与城市的联动选择,可以具体到二线城市。
代码:
 

<script>
//省市联动选择
//by www.jb200.com
var selectOption=  
{'四川省':{'key':'0','defaultvalue' : '成都','values':{'请选择…':'0'}},'安徽省':{'key':'安徽省','values':{'安庆':'安庆','蚌埠':'蚌埠','巢湖':'巢湖',
'滁州':'滁州','阜阳':'阜阳','贵池地区':'贵池地区','合肥':'合肥','淮北':'淮北','淮化':'淮化','淮南':'淮南','黄山':'黄山','六安':'六安','马鞍山':'马鞍山',
'宿州':'宿州','铜陵':'铜陵','屯溪':'屯溪','芜湖':'芜湖','宣城':'宣城'}},'澳门行政区':{'key':'澳门行政区','values':{'澳门':'澳门'}},'北京':{'key':'北京',
'values':{'北京市':'北京市','燕郊':'燕郊'}},'福建省':{'key':'福建省','values':{'福安':'福安','福州':'福州','龙岩':'龙岩','南平':'南平','宁德地区':'宁德地区',
'莆田':'莆田','泉州':'泉州','三明':'三明','邵武':'邵武','厦门':'厦门','永安':'永安','漳州':'漳州'}},'甘肃省':{'key':'甘肃省','values':{'白银':'白银',
'定西地区':'定西地区','敦煌':'敦煌','甘南州':'甘南州','金昌':'金昌','酒泉':'酒泉','兰州':'兰州','临夏自治州':'临夏自治州','平凉地区':'平凉地区','天水':'天水',
'武都':'武都','西峰':'西峰','张掖地区':'张掖地区'}},'广东省':{'key':'广东省','values':{'潮阳':'潮阳','潮州':'潮州','东莞':'东莞','佛山':'佛山','广州':'广州',
'河源':'河源','惠州':'惠州','江门':'江门','揭阳':'揭阳','茂名':'茂名','梅州':'梅州','清远':'清远','汕头':'汕头','汕尾':'汕尾','韶关':'韶关','深圳':'深圳',
'顺德':'顺德','阳江':'阳江','英德':'英德','云浮':'云浮','湛江':'湛江','肇庆':'肇庆','中山':'中山','珠海':'珠海'}},'广西自区':{'key':'广西自区',
'values':{'百色':'百色','北海':'北海','防城港':'防城港','桂林':'桂林','河池':'河池','柳州':'柳州','南宁':'南宁','钦州':'钦州','梧州':'梧州','玉林':'玉林'}},
'贵州省':{'key':'贵州省','values':{'安顺':'安顺','毕节':'毕节','都匀':'都匀','贵阳':'贵阳','凯里':'凯里','六盘水':'六盘水','铜仁':'铜仁','兴义':'兴义',
'玉屏':'玉屏','遵义':'遵义'}},'海南省':{'key':'海南省','values':{'海口':'海口','三亚':'三亚','通什':'通什','儋县':'儋县'}},'河北省':{'key':'河北省',
'values':{'保定':'保定','沧州':'沧州','承德':'承德','丰润':'丰润','邯郸':'邯郸','衡水':'衡水','廊坊':'廊坊','秦皇岛':'秦皇岛','石家庄':'石家庄',
'唐山':'唐山','新城':'新城','邢台':'邢台','张家口':'张家口'}},'河南省':{'key':'河南省','values':{'安阳':'安阳','鹤壁':'鹤壁','焦作':'焦作','开封':'开封',
'洛阳':'洛阳','南阳':'南阳','平顶山':'平顶山','三门峡':'三门峡','商丘':'商丘','新乡':'新乡','信阳':'信阳','许昌':'许昌','郑州':'郑州','周口地区':'周口地区',
'驻马店':'驻马店','潢川':'潢川','漯河':'漯河','濮阳':'濮阳'}},'黑龙江省':{'key':'黑龙江省','values':{'北安':'北安','大庆':'大庆','大兴安岭':'大兴安岭',
'哈尔滨':'哈尔滨','鹤岗':'鹤岗','黑河':'黑河','鸡西':'鸡西','佳木斯':'佳木斯','牡丹江':'牡丹江','七台河':'七台河','齐齐哈尔':'齐齐哈尔','双鸭山':'双鸭山',
'绥化':'绥化','伊春':'伊春'}},'湖北省':{'key':'湖北省','values':{'鄂州':'鄂州','恩施':'恩施','黄岗':'黄岗','黄石':'黄石','荆门':'荆门','荆州':'荆州',
'潜江':'潜江','十堰':'十堰','随州':'随州','武汉':'武汉','仙桃':'仙桃','咸宁':'咸宁','襄樊':'襄樊','襄阳':'襄阳','孝感':'孝感','宜昌':'宜昌'}},
'湖南省':{'key':'湖南省','values':{'常德':'常德','长沙':'长沙','郴州':'郴州','衡阳':'衡阳','怀化':'怀化','吉首':'吉首','娄底':'娄底','邵阳':'邵阳',
'湘潭':'湘潭','益阳':'益阳','永州':'永州','岳阳':'岳阳','张家界':'张家界','株洲':'株洲'}},'吉林省':{'key':'吉林省','values':{'白城':'白城','白山':'白山',
'长春':'长春','吉林':'吉林','辽源':'辽源','梅河口':'梅河口','四平':'四平','松原':'松原','通化':'通化','延吉':'延吉','珲春':'珲春'}},'江苏省':{'key':'江苏省',
'values':{'常熟':'常熟','常州':'常州','淮阴':'淮阴','连云港':'连云港','南京':'南京','南通':'南通','苏州':'苏州','泰州':'泰州','无锡':'无锡','徐州':'徐州',
'盐城':'盐城','扬州':'扬州','镇江':'镇江','沭阳':'沭阳'}},'江西省':{'key':'江西省','values':{'抚州地区':'抚州地区','赣州':'赣州','吉安地区':'吉安地区',
'井冈山':'井冈山','景德镇':'景德镇','九江':'九江','南昌':'南昌','萍乡':'萍乡','上饶':'上饶','新余':'新余','宜春地区':'宜春地区','鹰潭':'鹰潭'}},
'辽宁省':{'key':'辽宁省','values':{'鞍山':'鞍山','本溪':'本溪','朝阳':'朝阳','大连':'大连','丹东':'丹东','抚顺':'抚顺','阜新':'阜新','葫芦岛':'葫芦岛',
'锦州':'锦州','辽阳':'辽阳','盘锦':'盘锦','沈阳':'沈阳','铁岭':'铁岭','营口':'营口'}},'内蒙古自区':{'key':'内蒙古自区','values':{'阿拉善盟':'阿拉善盟',
'包头':'包头','赤峰':'赤峰','东胜':'东胜','海拉尔':'海拉尔','呼和浩特':'呼和浩特','集宁':'集宁','临河':'临河','通辽':'通辽','乌海':'乌海','乌兰浩特':'乌兰浩特',
'锡林浩特':'锡林浩特'}},'宁夏自区':{'key':'宁夏自区','values':{'固源地区':'固源地区','石嘴山':'石嘴山','吴忠':'吴忠','银川':'银川'}},'青海省':{'key':'青海省',
'values':{'德令哈':'德令哈','格尔木':'格尔木','共和':'共和','海东地区':'海东地区','海晏':'海晏','玛沁':'玛沁','同仁':'同仁','西宁':'西宁',
'玉树自治州':'玉树自治州'}},'山东省':{'key':'山东省','values':{'滨州地区':'滨州地区','德州':'德州','地区':'地区','东营':'东营','菏泽':'菏泽','济南':'济南',
'济宁':'济宁','莱芜':'莱芜','聊城':'聊城','临沂':'临沂','青岛':'青岛','日照':'日照','泰安':'泰安','威海':'威海','潍坊':'潍坊','薛城':'薛城','烟台':'烟台',
'枣庄':'枣庄','淄博':'淄博','兖州':'兖州'}},'山西省':{'key':'山西省','values':{'长治':'长治','大同':'大同','候马':'候马','晋城':'晋城','离石':'离石',
'临汾地区':'临汾地区','宁武':'宁武','朔州':'朔州','太原':'太原','析州地区':'析州地区','阳泉':'阳泉','榆次':'榆次','运城地区':'运城地区'}},
'陕西省':{'key':'陕西省','values':{'安康地区':'安康地区','宝鸡':'宝鸡','汉中':'汉中','商州地区':'商州地区','绥德':'绥德','铜川':'铜川','渭南':'渭南',
'西安':'西安','咸阳':'咸阳','延安':'延安','榆林地区':'榆林地区'}},'上海市':{'key':'上海市','values':{'上海市':'上海市'}},'四川省':{'key':'四川省',
'values':{'成都':'成都','巴中地区':'巴中地区','达州地区':'达州地区','德阳':'德阳','涪陵':'涪陵','广安':'广安','广元':'广元','康定':'康定','乐山':'乐山',
'马尔康':'马尔康','绵阳':'绵阳','南充':'南充','内江':'内江','攀枝花':'攀枝花','遂宁':'遂宁','西昌':'西昌','雅安地区':'雅安地区','宜宾':'宜宾','自贡':'自贡',
'汶川':'汶川','泸州':'泸州'}},'台湾省':{'key':'台湾省','values':{'高雄市':'高雄市','嘉义':'嘉义','台北市':'台北市','台南县':'台南县','台中县':'台中县',
'桃园市':'桃园市','新化县':'新化县','新竹':'新竹','漳化县':'漳化县'}},'天津市':{'key':'天津市','values':{'静海':'静海','天津市':'天津市','武清':'武清'}},
'西藏自区':{'key':'西藏自区','values':{'阿里地区':'阿里地区','昌都地区':'昌都地区','拉萨':'拉萨','林芝地区':'林芝地区','那曲地区':'那曲地区','日喀则':'日喀则',
'山南地区':'山南地区'}},'香港行政区':{'key':'香港行政区','values':{'香港':'香港'}},'新疆自区':{'key':'新疆自区','values':{'阿克苏':'阿克苏',
'阿勒泰地区':'阿勒泰地区','阿图什':'阿图什','博乐':'博乐','昌吉自治州':'昌吉自治州','东山':'东山','哈密':'哈密','和田':'和田','喀什':'喀什','克拉玛依':'克拉玛依',
'库车':'库车','库尔勒':'库尔勒','奎屯':'奎屯','石河子':'石河子','塔城地区':'塔城地区','吐鲁番':'吐鲁番','乌鲁木齐':'乌鲁木齐','伊宁':'伊宁'}},
'云南省':{'key':'云南省','values':{'保山地区':'保山地区','楚雄自治州':'楚雄自治州','大理':'大理','东川':'东川','个旧':'个旧','景洪':'景洪','开远':'开远',
'昆明':'昆明','丽江地区':'丽江地区','临沧地区':'临沧地区','六库':'六库','潞西':'潞西','曲靖':'曲靖','思茅地区':'思茅地区','文山自治州':'文山自治州','玉溪':'玉溪',
'昭通地区':'昭通地区','中甸':'中甸'}},'浙江省':{'key':'浙江省','values':{'定海':'定海','杭州':'杭州','湖州':'湖州','嘉兴':'嘉兴','金华':'金华','丽水':'丽水',
'临海':'临海','宁波':'宁波','绍兴':'绍兴','台州':'台州','温州':'温州','义乌':'义乌','舟山':'舟山','衢州':'衢州','瓯海':'瓯海'}},'重庆市':{'key':'重庆市',
'values':{'长寿':'长寿','达洲':'达洲','合川':'合川','江津':'江津','乐山':'乐山','黔江':'黔江','荣昌':'荣昌','中江':'中江','忠县':'忠县','重庆市':'重庆市'}},
'海外':{'key':'海外','values':{'美国':'美国','英国':'英国','法国':'法国','瑞士':'瑞士','澳洲':'澳洲','新西兰':'新西兰','加拿大':'加拿大','奥地利':'奥地利',
'韩国':'韩国','日本':'日本','德国':'德国','意大利':'意大利','西班牙':'西班牙','俄罗斯':'俄罗斯','泰国':'泰国','印度':'印度','荷兰':'荷兰','新加坡':'新加坡',
'欧洲':'欧洲','北美':'北美','南美':'南美','亚洲':'亚洲','非洲':'非洲','大洋洲':'大洋洲'}}};  
function initProvinceAndCity(pid,cid,p,c)  
{  
    if(typeof(selectOption[p])=='undefined')  
    {  
        console.log(p+' 这个省份不存在');  
        return;  
    }  
    var p_html = '';  
    for(var name in selectOption)  
    {  
        if(name==p)  
        {  
            p_html+='<option value="'+name+'" selected>'+name+'</option>';  
            provinceChanged(cid,p);  
        }else{  
            p_html+='<option value="'+name+'">'+name+'</option>';  
        }  
    }  
    $('#'+pid).html(p_html);  
    $('#'+pid).live("change",function(){  
            provinceChanged(cid,this.value);  
        }  
    );  
}  
function provinceChanged(cid,p)  
{  
    if(typeof(selectOption[p])=='undefined')  
    {  
        console.log(p+' 此省份不存在');  
        return;  
    }  
    var c_html = '';  
    for(var cname in selectOption[p].values)  
    {  
        c_html+='<option value="'+cname+'">'+cname+'</option>';  
    }  
    $('#'+cid).html(c_html);  
}  
  
//调用示例
//initProvinceAndCity("province","city",info.province,info.city); 
</script>