当前位置:首页 > 文章教程 > 建站教程 > 详情页

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

分类:建站教程作者:老鱼网日期:2021年09月10日点击: 19

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

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

全国城市二级联动选择功能

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

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

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

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

<div class="shengName"></div>

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

<script>
/*代码来源:学做网站论坛 https://www.laoyublog.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.laoyublog.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);


}
})

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


相关推荐