如何制作网站上全国城市二级联动选择功能

什么是全国城市二级联动选择功能？

全国城市二级联动选择功能在很多有全国各地城市分站的网站上很常见，用户可以选择自己想要到达的城市进入对应城市的站点。二级联动，就是当用户点击第一级省名时，自动显示出该省下面的所有市名供用户选择。

全国城市二级联动选择功能怎么做?

这种二级联动选择功能相对比较复杂，下面介绍一下制作方法。

制作这种二级联动选择功能，我们可以使用JQUERY 的HTML插入功能来做。

第一步：我们写一个存放省份的DIV，并且给它起个名字。如下：

<div class="shengname"></div>

第二步：通过JQUERY给这个DIV播入各个省的名字；

<script>

/*代码来源：学做网站论坛 https://www.xuewangzhan.com */

var sheng = ["北京市","天津市","上海市","重庆市","河北省","山西省","内蒙古","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西","海南省","四川省","贵州省","云南省","西藏","陕西省","甘肃省","青海省","宁夏","新疆","香港","澳门","台湾省"];

for(var i=0;i<sheng.length;i++){

var lrlist = '<a id="tab'+(i+1)+'">'+sheng[i]+'</a>';

$(".shengname").append(lrlist);

}

</script>

第三步：上面的步骤，我们就将省份写好了，下面就是写各个省份下面的城市名了。先写一个空的DIV，并给它也取个名字。

<div class="citylist"></div>

第四步：再使用JQUERY给这个DIV播入各个城市的名字；这里先要用定义一下城市的数组。

<script>

var cityname1 = ["北京","东城区","西城区","朝阳区","丰台区","石景山区","海淀区门","头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县"];

var cityname2 = ["天津","和平区","河东区","河西区","南开区","河北区","红桥区","滨海新区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","宁河县","静海县蓟县"];

var cityname3 = ["上海","黄浦区","徐汇区","长宁区","静安区","普陀区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","奉贤区","崇明区"];

var cityname4 = ["重庆","万州区","涪陵区","渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","綦江区","大足区","渝北区","巴南区","黔江区","长寿区","江津区","合川区","永川区","南川区","璧山区","铜梁区","潼南区","荣昌区","开州区","梁平区","武隆区","城口县","丰都县","垫江县","忠县","云阳县","奉节县","巫山县","巫溪县","石柱土家族自治县","秀山土家族苗族自治县","酉阳土家族苗族自治县","彭水苗族土家族自治县"];

var cityname5 = ["河北","石家庄","张家口","承德","秦皇岛","唐山","廊坊","保定","衡水","沧州","邢台","邯郸"];

var cityname6 = ["山西","太原","朔州","大同","阳泉","长治","晋城","忻州","晋中","临汾","吕梁","运城"];

var cityname7 = ["内蒙古","呼和浩特","包头","乌海","赤峰","通辽","呼伦贝尔","鄂尔多斯","乌兰察布","巴彦淖尔","兴安盟","锡林郭勒盟","阿拉善盟"];

var cityname8 = ["辽宁","沈阳","朝阳","阜新","铁岭","抚顺","本溪","辽阳","鞍山","丹东","大连","营口","盘锦","锦州","葫芦岛"];

var cityname9 = ["吉林","长春","白城","松原","吉林","四平","辽源","通化","白山","延边州"];

var cityname10 = ["黑龙江","哈尔滨","齐齐哈尔","七台河","黑河","大庆","鹤岗","伊春","佳木斯","双鸭山","鸡西","牡丹江","绥化","大兴安岭地区"];

var cityname11 = ["江苏","南京","徐州","连云港","宿迁","淮安","盐城","扬州","泰州","南通","镇江","常州","无锡","苏州"];

var cityname12 = ["浙江","杭州","湖州","嘉兴","舟山","宁波","绍兴","衢州","金华","台州","温州","丽水"];

var cityname13 = ["安徽","合肥","宿州","淮北","亳州","阜阳","蚌埠","淮南","滁州","马鞍山","芜湖","铜陵","安庆","黄山","六安","巢湖","池州","宣城"];

var cityname14 = ["福建","福州","南平","莆田","三明","泉州","厦门","漳州","龙岩","宁德"];

var cityname15 = ["江西","南昌","九江","景德镇","鹰潭","新余","萍乡","赣州","上饶","抚州","宜春","吉安"];

var cityname16 = ["山东","济南","青岛","聊城","德州","东营","淄博","潍坊","烟台","威海","日照","临沂","枣庄","济宁","泰安","莱芜","滨州","菏泽"];

var cityname17 = ["河南","郑州","开封","三门峡","洛阳","焦作","新乡","鹤壁","安阳","濮阳","商丘","许昌","漯河","平顶山","南阳","信阳","周口","驻马店","济源"];

var cityname18 = ["湖北","武汉","十堰","襄樊","荆门","孝感","黄冈","鄂州","黄石","咸宁","荆州","宜昌","随州","恩施州"];

var cityname19 = ["湖南","长沙","张家界","常德","益阳","岳阳","株洲","湘潭","衡阳","郴州","永州","邵阳","怀化","娄底","湘西州"];

var cityname20 = ["广东","广州","深圳","清远","韶关","河源","梅州","潮州","汕头","揭阳","汕尾","惠州","东莞","珠海","中山","江门","佛山","肇庆","云浮","阳江","茂名","湛江"];

var cityname21 = ["广西","南宁","桂林","柳州","梧州","贵港","玉林","钦州","北海","防城港","崇左","百色","河池","来宾","贺州"];

var cityname22 = ["海南","海口","三亚","省直辖行政单位"];

var cityname23 = ["四川","成都","广元","绵阳","德阳","南充","广安","遂宁","内江","乐山","自贡","泸州","宜宾","攀枝花","巴中","达州","资阳","眉山","雅安","阿坝州","甘孜州","凉山州"];

var cityname24 = ["贵州","贵阳","六盘水","遵义","安顺","毕节地区","铜仁地区","黔东南州","黔南州","黔西南州"];

var cityname25 = ["云南","昆明","曲靖","玉溪","保山","昭通","丽江","思茅","临沧","德宏州","怒江州","迪庆州","大理州","楚雄州","红河州","文山州","西双版纳"];

var cityname26 = ["西藏","拉萨","那曲地区","昌都地区","林芝地区","山南地区","日喀则地区","阿里地区"];

var cityname27 = ["陕西","西安","延安","铜川","渭南","咸阳","宝鸡","汉中","榆林","安康","商洛"];

var cityname28 = ["甘肃","兰州","嘉峪关","白银","天水","武威","酒泉","张掖","庆阳","平凉","定西","陇南","临夏州","甘南州"];

var cityname29 = ["青海","西宁","海东地区","海北州","海南州","黄南州","果洛州","玉树州","海西州"];

var cityname30 = ["宁夏","银川","石嘴山","吴忠","固原","中卫"];

var cityname31 = ["新疆","乌鲁木齐","克拉玛依","自治区直辖县级行政单位","喀什地区","阿克苏地区","和田地区","吐鲁番地区","哈密地区","克孜勒苏柯州","博尔塔拉州","昌吉州","巴音郭楞州","伊犁州","塔城地区","阿勒泰地区"];

var cityname32 = ["香港"];

var cityname33 = ["澳门"];

var cityname34 = ["台湾","台北","高雄","台中","花莲","基隆","嘉义","金门","连江","苗栗","南投","澎湖","屏东","台东","台南","桃园","新竹","宜兰","云林","彰化"];

</script>

第五步：再次使用JQUERY先添加UL标签，再在UL标签里插入所的城市名；

<script>

/*代码来源：学做网站论坛 https://www.xuewangzhan.com */

for(var r=1;r<35;r++){

var ultab = '<ul class="tab'+r+'"></ul>';

$(".citylist").append(ultab);



var cityarr = eval("cityname"+r );

console.dir(cityarr);

for(var i=0;i<cityarr.length;i++){

var lrlist = '<a data-id="1_'+(i+1)+'">'+cityarr[i]+'</a>';

$("ul.tab"+r).append(lrlist);

}

}

</script>

第六步：通过上面的代码，我们就将全国各个省会和城市全部写了出来，下面就是关联了。使用下面的代码实现二者的关联，点击一个省份名后，显示该省下面的所有城市。

if(tjid){

var tjidarr = tjid.split('_');//参数转成数组

$('a#tab'+tjidarr[0]).addClass("selected").siblings().removeClass("selected");//一级省份当前样式

$(".citylist .tab"+tjidarr[0]).css("display","block");

}



$('a[data-id="'+tjid+'"]').addClass("selected").siblings().removeClass("selected");//二级城市当前样式



$(".citylist a").click(function(){

var thisurl = window.location.href;

if(thisurl.indexOf("tuijian=") >= 0){



var can1 = "tuijian="+tjid;

var can2 = "tuijian="+ $(this).attr("data-id");



var thisurl2 = thisurl.replace(can1, can2);



$(this).attr("href",thisurl2);





}else if(thisurl.indexOf("?") >= 0){

$(this).attr("href",thisurl+"&tuijian="+$(this).attr("data-id"));

}else{

$(this).attr("href",thisurl+"?tuijian="+$(this).attr("data-id"));

}

})



//点击全部城市

$(".shengname>a:first-child").click(function(){

var thisurl = window.location.href;

if(thisurl.indexOf("tuijian=") >= 0){



var can1 = tjid;



var thisurl2 = thisurl.replace(can1, '');



$(this).attr("href",thisurl2);





}

})

以上就是制作网站上全国城市二级联动选择功能的全部代码，代码有点多，对于新手来说可以自己研究一下。