如何制作网站全国分站点选择功能

像58同城、赶集网这些大型网站，都会有全国分站点选择功能，可以供用户直接选择自己所在的城市，进入对应的分站站点。这个教程跟大家介绍一下如何制作网站的全国分站点选择功能。效果如下图：

制作这样的全国分站点功能需要使用JS代码进行全国城市的调用。制作这样的功能，我们可以使用WordPress 多城市插件，也可以自己写代码来做。这个功能与之前制作网站上全国城市二级联动选择功能特别相似。

下面将这种全国分站点功能代码分享出来。

首先是HTML代码

<div class="meng" id="mengCity">

<div class="citySelectBackground">

<div class="ocha" id="ocha">×</div>

<div class="province" >

<li class="oc" style="background-color: #21AECB;color: white;">北京市</li>

<li class="oc">上海市</li>

<li class="oc">天津市</li>

<li class="oc">重庆市</li>

<li class="oc">河北</li>

<li class="oc">山西</li>

<li class="oc">内蒙古</li>

<li class="oc">辽宁</li>

<li class="oc">吉林</li>

<li class="oc">黑龙江</li>

<li class="oc">江苏</li>

<li class="oc">浙江</li>

<li class="oc">安徽</li>

<li class="oc">福建</li>

<li class="oc">江西</li>

<li class="oc">山东</li>

<li class="oc">河南</li>

<li class="oc">湖北</li>

<li class="oc">湖南</li>

<li class="oc">广东</li>

<li class="oc">广西</li>

<li class="oc">海南</li>

<li class="oc">四川</li>

<li class="oc">贵州</li>

<li class="oc">云南</li>

<li class="oc">西藏</li>

<li class="oc">陕西</li>

<li class="oc">甘肃</li>

<li class="oc">青海</li>

<li class="oc">宁夏</li>

<li class="oc">新疆</li>

<li class="oc">台湾</li>

<li class="oc">香港</li>

<li class="oc">国外</li>

</div>

<div class="city" id="oCity"></div>

<div class="osubmit quer" id="quer">确认</div>

</div>

</div>

<!-- 不是蒙版层 -->

<div>

<li class="one">城市:</li>

<li class="er">

<input class="erText" id="citySelect" value="请选择" disabled />

<div id="citySelectBtn" class="erbtn2">请选择</div>

</li>

</div>

JS代码：

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script type="text/javascript">

// 省份城市的联动

var oC=document.getElementsByClassName('oc');

var oCity=document.getElementById('oCity');

var city = [];//申明

//定义二级数据

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

city[1] = ['和平区','河东区','河西区','南开区','河北区','红桥区','东丽区','西青区','津南区','北辰区','武清区','宝坻区','滨海新区','宁河区','静海区','蓟州区'];

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

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

city[4] = ['石家庄市','唐山市','秦皇岛市','邯郸市','邢台市','保定市','张家口市','承德市','沧州市','廊坊市','衡水市'];

city[5] = ['太原市','大同市','阳泉市','长治市','晋城市','朔州市','晋中市','运城市','忻州市','临汾市','吕梁市'];

city[6] = ['呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市','兴安盟','锡林郭勒盟','阿拉善盟'];

city[7] = ['沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市','朝阳市','葫芦岛市'];

city[8] = ['长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边朝鲜族自治州'];

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

city[10] = ['南京市','无锡市','徐州市','常州市','苏州市','南通市','连云港市','淮安市','盐城市','扬州市','镇江市','泰州市','宿迁市'];

city[11] = ['杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市'];

city[12] = ['合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市','宿州市','六安市','亳州市','池州市','宣城市'];

city[13] = ['福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市'];

city[14] = ['南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市'];

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

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

city[17] = ['武汉市','黄石市','十堰市','宜昌市','襄阳市','鄂州市','荆门市','孝感市','荆州市','黄冈市','咸宁市','随州市','恩施土家族苗族自治州','仙桃市','潜江市','天门市','神农架林区'];

city[18] = ['长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市','湘西土家族苗族自治州'];

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

city[20] = ['南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市'];

city[21] = ['海口市','三亚市','三沙市','儋州市','五指山市','琼海市','文昌市','万宁市','东方市','定安县','屯昌县','澄迈县','临高县','白沙黎族自治县','昌江黎族自治县','乐东黎族自治县','陵水黎族自治县','保亭黎族苗族自治县','琼中黎族苗族自治县'];

city[22] = ['成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市','阿坝藏族羌族自治州','甘孜藏族自治州','凉山彝族自治州'];

city[23] = ['贵阳市','六盘水市','钟山区','遵义市','安顺市','毕节市','铜仁市','黔西南布依族苗族自治州','黔东南苗族侗族自治州','黔南布依族苗族自治州'];

city[24] = ['昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市','楚雄彝族自治州','红河哈尼族彝族自治州','文山壮族苗族自治州','西双版纳傣族自治州','大理白族自治州','德宏傣族景颇族自治州','怒江傈僳族自治州','迪庆藏族自治州'];

city[25] = ['拉萨市','日喀则市','昌都市','林芝市','山南市','那曲市','阿里地区'];

city[26] = ['西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市'];

city[27] = ['嘉峪关市','金昌市','白银市','天水市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市','临夏回族自治州甘南藏族自治州'];

city[28] = ['西宁市','海东市','海北藏族自治州','黄南藏族自治州','海南藏族自治州','果洛藏族自治州','玉树藏族自治州','海西蒙古族藏族自治州'];

city[29] = ['银川市','石嘴山市','吴忠市','固原市','中卫市'];

city[30] = ['乌鲁木齐市','克拉玛依市','吐鲁番市','哈密市','昌吉回族自治州','博尔塔拉蒙古自治州','巴音郭楞蒙古自治州','阿克苏地区','克孜勒苏柯尔克孜自治州','喀什地区','和田地区','伊犁哈萨克自治州','塔城地区','阿勒泰地区','石河子市','阿拉尔市','图木舒克市','五家渠市','北屯市','铁门关市','双河市','可克达拉市','昆玉市'];

city[31] = [];

city[32] = [];

city[33] = [];

// 调用城市选择的函数

// 样式的改变

for(var p=0;p<oC.length;p++){

oC[p].indexx=p;

oC[p].onclick=function(){

func(this.indexx);

this.style.backgroundColor = "#21AECB";

this.style.color = "white";

for(var j=0;j<oC.length;j++){

if(j!=this.indexx){

oC[j].style.backgroundColor = "white";

oC[j].style.color = "#21AECB";

}

}

}

}

// 把城市刷出来

function func(m){

oCity.innerHTML="";

for (var i = 0; i < city[m].length; i++) {

//创建一个option 把数据存储在option

var op = new Option(city[m][i],i);

op.className='cityclass';

oCity.append(op);

};

getCityName();

}

func(0);

// 把选择的城市的数据传给一个input

var citySelect=document.getElementById('citySelect');

function getCityName(){

var cityEach=document.getElementsByClassName('cityclass');

for(var q=0;q<cityEach.length;q++){

// 传递数据

cityEach[q].indexx=q;

cityEach[q].onclick=function(){

citySelect.value=this.innerHTML;

// 改变样式

this.style.backgroundColor = "#21AECB";

this.style.color = "white";

for(var j=0;j<cityEach.length;j++){

if(j!=this.indexx){

cityEach[j].style.backgroundColor = "white";

cityEach[j].style.color = "#21AECB";

}

}

}

}

}

getCityName();



// 调用城市选择的蒙版层

$("#ocha").click(function(){

$("#mengCity").css("display","none");

})

$("#quer").click(function(){

$("#mengCity").css("display","none");

})

$("#citySelectBtn").click(function(){

$("#mengCity").css("display","block");

})



</script>

CSS样式代码：

<style type="text/css">

li{

list-style: none;

display: inline-block;

margin-top: 20px;

}

.meng{

width: 100%;

height: 100%;

background-color: rgba(39,40,34,0.8);

position: fixed;

z-index: 99;

display: none;

}

.citySelectBackground{

width: 600px;

height: 400px;

position: absolute;

left: 50%;



margin-left: -300px;

margin-top: 100px;

background-color: white;

}

.osubmit{

width: 100px;

height: 30px;

background-color: rgb(51,133,255);

border: none;

cursor: pointer;

margin-top: 20px;

color: white;



}

.province{

width: 200px;

margin-top: 30px;

margin-left: 30px;

/* background-color: pink;*/

height: 300px;

overflow: auto;



display: inline-block;

}

.province li{

list-style: none;

width: 200px;

height: 30px;

color: #21AECB;

cursor: pointer;

/* background-color: yellow;*/

line-height: 30px;



font-size: 17px;

text-align: center;

margin-top: 5px;

}

.province li:hover{

background-color: #21AECB;

color: white;

}

.city{

width: 300px;

margin-top: 30px;

margin-left: 30px;

/* background-color: pink;*/

height: 300px;

overflow: auto;

display: inline-block;

}

.city option{



/* width: 100%;*/

height: 30px;

color: #21AECB;

cursor: pointer;

/* background-color: yellow;*/

line-height: 30px;

font-size: 17px;

margin-top: 5px;

}

.city option:hover{

background-color: #21AECB;

color: white;

}

.ocha{

position: absolute;

font-size: 20px;

top: 5px;

cursor: pointer;

right: 10px;

width: 20px;

display: inline-block;

}

.quer{

margin: 0 auto;

margin-top: 20px;

text-align: center;

line-height: 30px;

}

.one{

width: 80px;

}

.er{

width: 300px;

/*overflow: auto;*/

}

.er textarea{

width: 400px;

height: 100px;

vertical-align: top;

}

.er img{

vertical-align: top;

width: 400px;

height: 200px;

}

.erbtn{

width: 200px;

cursor: pointer;

}

.erbtn2{

width: 80px;

height: 32px;

margin: 0px;

background-color: rgb(51,133,255);

display: inline-block;

position: relative;

/* top: -5px;*/

color: white;

cursor: pointer;

text-align: center;

line-height: 30px;

left: -5px;

}

.erbtn2:hover{

background-color: #33B0FF;



}

.erText{



width: 200px;

height: 30px;

}

</style>

以上就是制作网站全国分站点选择功能全部代码，如果正想制作全国分站点的同学，可以试一下。