零基础学做网站培训介绍

当前位置:

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

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

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

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

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

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

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

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


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

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


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


}
})

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

相关阅读:

全国省市二级联动下拉菜单JS代码

WordPress 三级联动多条件筛选功能制作

网站二级、三级联动选择制作方法(附JS Select联动代码 )

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 广州全璟皮革制品有限公司网站,本公司是一家细致印花厂家,集数码印花、服装印花、数码直喷、印花加工等设计、生产、销售。全璟数码印花公司网站由
  • 什么是全国城市二级联动选择功能?全国城市二级联动选择功能在很多有全国各地城市分站的网站上很常见,用户可以选择自己想要到达的城市进入对应城
  • 这篇文章为大家详细介绍了基于javascript实现全国省市二级联动下拉菜单,文中示例代码介绍的特别详细,具有一定的参考价值,感兴趣的小伙伴们可以参考
  • 像58同城、赶集网这些大型网站,都会有全国分站点选择功能,可以供用户直接选择自己所在的城市,进入对应的分站站点。这个教程跟大家介绍一下如何制作
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 自己用代码写的一个网站,莫见笑,这是学习了张老师的代码课程后,自己先画了一个图,然后再用PS切片,再使用DIV和CSS写的一个网站,第一次写,写的不
  • 什么是网站二级、三级联动选择二级、三级联动选择简单的说就是一层一层的选择,例如一些商城网站里,用户在选择衣服时,先选择品牌,再选择这个品
  • 对于有条件的学员,在做网站的时候,可以选择服务器来存储自己网站的内容,这样打开速度快,反应敏捷。对于网站服务器来说,一般空间商会按照其性
  • 对于学建网站,首先必须有自己的网站域名,如何选择适合自己的网站域名呢?【相关教程:如何购买域名和空间】选择域名三要素: 域名要简单、
  • 问:购买虚拟空间Windows和Linux怎么选择啊!那个好些!答:根据网站程序的不同选择不同的服务器空间,ASP---WINDOWS  php---LINUX。通常我们在建
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 多站点 (Multisite) 功能是 WordPress 3.0  版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手工