如何制作网站全国分站点选择功能
像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>
以上就是制作网站全国分站点选择功能全部代码，如果正想制作全国分站点的同学，可以试一下。
