纯js实现省市级联效果
我们都知道一般有注册的时候会让用户填入省市啊地区什么的，然后我就想使用纯js制作一个省市级联的效果，只是用于学习以及回顾温习用，首先看下效果图，界面很丑啊，不要嫌弃！
首先还是先看下我的项目目录吧
很清晰明了，什么样的文件放入什么样的文件夹中，劝大家还是养成分文件夹存放的习惯，这样看的条理清晰也方便我们管理，以及维护等等
可以看到，我将实现省市级联的js文件放入了js文件夹中，将得到的省市的json数据放入json文件夹中，界面就不用说了吧
这里先放上我们的界面代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<title></title>
</head>
<style>
body{
margin:0px;
padding:0px;
}
.div_swf{
width: 100%;
height: 150px;
border: 1px solid black;
}
</style>
<!-- 引入外部json文件，记得下载josn文件的时候，要重新使用记事本打开一次，然后另存为的时候设置下编码格式为utf-8，这样就避免了乱码 -->
<script type="text/javascript" src="../json/province_city.json"></script>
<!-- 引入外部设置省市级联的js文件，新建一个js文件的时候会出现乱码，但是经过使用记事本打开后另存为的时候设置编码格式即可 -->
<script type="text/javascript" src="../js/ss.js"></script>
<body onload="onload()">
<div style="text-align: center;width: 250px;margin-top:10px;">
<font>省市级联效果</font><br><br>
<!-- 这里是选择省份 -->
<select id ="Province" onchange ="changeCity()">
<option >请选择省份</option>
</select>
<!-- 这里是选择市 -->
<select id ="city">
<option >请选择城市</option>
</select>
</div>
</body>
</html>
可以看到我界面代码中根本就没有出现js代码，是因为我把js代码让入了外部js文件夹里面，为什么这样放，试想一下，如果我们把js代码都写到界面里面是不是会非常的混杂，而且很多，不方便阅读以及管理，这样做只是为了让我们的代码更加简洁易懂，方便管理
好啦，废话就不说了，接下来就开始实现我们的省市级联了
首先的第一步肯定是要先准备好省市的数据，我就随便在网上找了下，然后经过自己的修改后将它保存为了一份json文件，这里给你们吧，直接赋值到文本里面然后改后缀即可
var json = [
{
"北京市": [
"西城",
"东城",
"崇文",
"宣武",
"朝阳",
"海淀",
"丰台",
"石景山",
"门头沟",
"房山",
"通州",
"顺义",
"大兴",
"昌平",
"平谷",
"怀柔",
"密云",
"延庆"
],
"name": "北京市"
},
{
"天津市": [
"青羊",
"河东",
"河西",
"南开",
"河北",
"红桥",
"塘沽",
"汉沽",
"大港",
"东丽",
"西青",
"北辰",
"津南",
"武清",
"宝坻",
"静海",
"宁河",
"蓟县",
"开发区"
],
"name": "天津市"
},
{
"河北省": [
"石家庄",
"秦皇岛",
"廊坊",
"保定",
"邯郸",
"唐山",
"邢台",
"衡水",
"张家口",
"承德",
"沧州",
"衡水"
],
"name": "河北省"
},
{
"山西省": [
"太原",
"大同",
"长治",
"晋中",
"阳泉",
"朔州",
"运城",
"临汾"
],
"name": "山西省"
},
{
"内蒙古自治区": [
"呼和浩特",
"赤峰",
"通辽",
"锡林郭勒",
"兴安"
],
"name": "内蒙古自治区"
},
{
"辽宁省": [
"大连",
"沈阳",
"鞍山",
"抚顺",
"营口",
"锦州",
"丹东",
"朝阳",
"辽阳",
"阜新",
"铁岭",
"盘锦",
"本溪",
"葫芦岛"
],
"name": "辽宁省"
},
{
"吉林省": [
"长春",
"吉林",
"四平",
"辽源",
"通化",
"延吉",
"白城",
"辽源",
"松原",
"临江",
"珲春"
],
"name": "吉林省"
},
{
"黑龙江省": [
"哈尔滨",
"齐齐哈尔",
"大庆",
"牡丹江",
"鹤岗",
"佳木斯",
"绥化"
],
"name": "黑龙江省"
},
{
"上海市": [
"浦东",
"杨浦",
"徐汇",
"静安",
"卢湾",
"黄浦",
"普陀",
"闸北",
"虹口",
"长宁",
"宝山",
"闵行",
"嘉定",
"金山",
"松江",
"青浦",
"崇明",
"奉贤",
"南汇"
],
"name": "上海市"
},
{
"江苏省": [
"南京",
"苏州",
"无锡",
"常州",
"扬州",
"徐州",
"南通",
"镇江",
"泰州",
"淮安",
"连云港",
"宿迁",
"盐城",
"淮阴",
"沐阳",
"张家港"
],
"name": "江苏省"
},
{
"浙江省": [
"杭州",
"金华",
"宁波",
"温州",
"嘉兴",
"绍兴",
"丽水",
"湖州",
"台州",
"舟山",
"衢州"
],
"name": "浙江省"
},
{
"安徽省": [
"合肥",
"马鞍山",
"蚌埠",
"黄山",
"芜湖",
"淮南",
"铜陵",
"阜阳",
"宣城",
"安庆"
],
"name": "安徽省"
},
{
"福建省": [
"福州",
"厦门",
"泉州",
"漳州",
"南平",
"龙岩",
"莆田",
"三明",
"宁德"
],
"name": "福建省"
},
{
"江西省": [
"南昌",
"景德镇",
"上饶",
"萍乡",
"九江",
"吉安",
"宜春",
"鹰潭",
"新余",
"赣州"
],
"name": "江西省"
},
{
"山东省": [
"青岛",
"济南",
"淄博",
"烟台",
"泰安",
"临沂",
"日照",
"德州",
"威海",
"东营",
"荷泽",
"济宁",
"潍坊",
"枣庄",
"聊城"
],
"name": "山东省"
},
{
"河南省": [
"郑州",
"洛阳",
"开封",
"平顶山",
"濮阳",
"安阳",
"许昌",
"南阳",
"信阳",
"周口",
"新乡",
"焦作",
"三门峡",
"商丘"
],
"name": "河南省"
},
{
"湖北省": [
"武汉",
"襄樊",
"孝感",
"十堰",
"荆州",
"黄石",
"宜昌",
"黄冈",
"恩施",
"鄂州",
"江汉",
"随枣",
"荆沙",
"咸宁"
],
"name": "湖北省"
},
{
"湖南省": [
"长沙",
"湘潭",
"岳阳",
"株洲",
"怀化",
"永州",
"益阳",
"张家界",
"常德",
"衡阳",
"湘西",
"邵阳",
"娄底",
"郴州"
],
"name": "湖南省"
},
{
"广东省": [
"广州",
"深圳",
"东莞",
"佛山",
"珠海",
"汕头",
"韶关",
"江门",
"梅州",
"揭阳",
"中山",
"河源",
"惠州",
"茂名",
"湛江",
"阳江",
"潮州",
"云浮",
"汕尾",
"潮阳",
"肇庆",
"顺德",
"清远"
],
"name": "广东省"
},
{
"广西壮族自治区": [
"南宁",
"桂林",
"柳州",
"梧州",
"来宾",
"贵港",
"玉林",
"贺州"
],
"name": "广西壮族自治区"
},
{
"海南省": [
"海口",
"三亚"
],
"name": "海南省"
},
{
"重庆市": [
"渝中",
"大渡口",
"江北",
"沙坪坝",
"九龙坡",
"南岸",
"北碚",
"万盛",
"双桥",
"渝北",
"巴南",
"万州",
"涪陵",
"黔江",
"长寿"
],
"name": "重庆市"
},
{
"四川省": [
"成都",
"达州",
"南充",
"乐山",
"绵阳",
"德阳",
"内江",
"遂宁",
"宜宾",
"巴中",
"自贡",
"康定",
"攀枝花"
],
"name": "四川省"
},
{
"贵州省": [
"贵阳",
"遵义",
"安顺",
"黔西南",
"都匀"
],
"name": "贵州省"
},
{
"云南省": [
"昆明",
"丽江",
"昭通",
"玉溪",
"临沧",
"文山",
"红河",
"楚雄",
"大理"
],
"name": "云南省"
},
{
"西藏自治区": [
"拉萨",
"林芝",
"日喀则",
"昌都"
],
"name": "西藏自治区"
},
{
"陕西省": [
"西安",
"咸阳",
"延安",
"汉中",
"榆林",
"商南",
"略阳",
"宜君",
"麟游",
"白河"
],
"name": "陕西省"
},
{
"甘肃省": [
"兰州",
"金昌",
"天水",
"武威",
"张掖",
"平凉",
"酒泉"
],
"name": "甘肃省"
},
{
"青海省": [
"黄南",
"海南",
"西宁",
"海东",
"海西",
"海北",
"果洛",
"玉树"
],
"name": "青海省"
},
{
"宁夏回族自治区": [
"银川",
"吴忠"
],
"name": "宁夏回族自治区"
},
{
"新疆维吾尔自治区": [
"乌鲁木齐",
"哈密",
"喀什",
"巴音郭楞",
"昌吉",
"伊犁",
"阿勒泰",
"克拉玛依",
"博尔塔拉"
],
"name": "新疆维吾尔自治区"
},
{
"香港特别行政区": [
"中西区",
"湾仔区",
"东区",
"南区",
"九龙-油尖旺区",
"九龙-深水埗区",
"九龙-九龙城区",
"九龙-黄大仙区",
"九龙-观塘区",
"新界-北区",
"新界-大埔区",
"新界-沙田区",
"新界-西贡区",
"新界-荃湾区",
"新界-屯门区",
"新界-元朗区",
"新界-葵青区",
"新界-离岛区"
],
"name": "香港特别行政区"
},
{
"澳门特别行政区": [
"花地玛堂区",
"圣安多尼堂区",
"大堂区",
"望德堂区",
"风顺堂区",
"嘉模堂区",
"圣方济各堂区",
"路氹城"
],
"name": "澳门特别行政区"
}
]
说明下为什么我开头会加上 var json = ，这是因为这个json文件是一个独立的外部文件，而我们的js脚本想要访问到里面的内容的时候就要做两步，先就像我这样 使用var json = 然后在页面中进行引入这个json文件
<script type="text/javascript" src="../json/province_city.json"></script>
这样我们的js就可以获取到json文件里面的内容了，当然我们的js文件肯定也是要引入的，这里就不再说了
说个重要的吧，当我们引入这个json文件的还是可能会出现乱码是因为默认的编码格式是ANSI格式的，如果里面还有中文的话就会出现乱码，那么怎么解决呢？其实很简单，把这个js文件使用记事本打开后进行另存为，在另存为的时候有个编码，将它修改为utf-8即可
ok，我们的数据准备个工作做好啦！接下来就是开始实现我们的功能了
首先在界面上写上我们需要的下拉框组件
<div style="text-align: center;width: 250px;margin-top:10px;">
<font>省市级联效果</font><br><br>
<!-- 这里是选择省份 -->
<select id ="Province" onchange ="changeCity()">
<option >请选择省份</option>
</select>
<!-- 这里是选择市 -->
<select id ="city">
<option >请选择城市</option>
</select>
</div>
当然这样是没有实现省市级联的，是因为我把实现代码也就是js代码放入了外部js文件中了，直接使用即可，写贴上我们的代码
//这个方法用来给省份的select赋值
function onload(){
//获取json格式之后转化为数组
var json_array = eval(json);
var Province = document.getElementById("Province");
for(var i = 0;i<json_array.length;i++){
var json_p = json_array[i].name;
Province.add(new Option(json_p,json_p), null);
}
};
//这个方法就是实现省市级联的核心方法，也是用来给市的select赋值
function changeCity() {
var Province = document.getElementById("Province");
var Provincevalue = Province.options[Province.selectedIndex].value;
var city = document.getElementById("city");
var optinsValue;
//获取json格式之后转化为数组
var json_array = eval(json);
//获取当前选中的省份Province.value;
city.options.length = 0; //清空城市
switch(Provincevalue){
case "北京市":
optinsValue = json_array[0].北京市;
break;
case "天津市":
optinsValue = json_array[1].天津市;
break;
case "河北省":
optinsValue = json_array[2].河北省;
break;
case "山西省":
optinsValue = json_array[3].山西省;
break;
case "内蒙古自治区":
optinsValue = json_array[4].内蒙古自治区;
break;
case "辽宁省":
optinsValue = json_array[5].辽宁省;
break;
case "吉林省":
optinsValue = json_array[6].吉林省;
break;
case "黑龙江省":
optinsValue = json_array[7].黑龙江省;
break;
case "上海市":
optinsValue = json_array[8].上海市;
break;
case "江苏省":
optinsValue = json_array[9].江苏省;
break;
case "浙江省":
optinsValue = json_array[10].浙江省;
break;
case "安徽省":
optinsValue = json_array[11].安徽省;
break;
case "福建省":
optinsValue = json_array[12].福建省;
break;
case "江西省":
optinsValue = json_array[13].江西省;
break;
case "山东省":
optinsValue = json_array[14].山东省;
break;
case "河南省":
optinsValue = json_array[15].河南省;
break;
case "湖北省":
optinsValue = json_array[16].湖北省;
break;
case "湖南省":
optinsValue = json_array[17].湖南省;
break;
case "广东省":
optinsValue = json_array[18].广东省;
break;
case "广西壮族自治区":
optinsValue = json_array[19].广西壮族自治区;
break;
case "海南省":
optinsValue = json_array[20].海南省;
break;
case "重庆市":
optinsValue = json_array[21].重庆市;
break;
case "四川省":
optinsValue = json_array[22].四川省;
break;
case "贵州省":
optinsValue = json_array[23].贵州省;
break;
case "云南省":
optinsValue = json_array[24].云南省;
break;
case "西藏自治区":
optinsValue = json_array[25].西藏自治区;
break;
case "陕西省":
optinsValue = json_array[26].陕西省;
break;
case "甘肃省":
optinsValue = json_array[27].甘肃省;
break;
case "青海省":
optinsValue = json_array[28].青海省;
break;
case "宁夏回族自治区":
optinsValue = json_array[29].宁夏回族自治区;
break;
case "新疆维吾尔自治区":
optinsValue = json_array[30].新疆维吾尔自治区;
break;
case "香港特别行政区":
optinsValue = json_array[31].香港特别行政区;
break;
case "澳门特别行政区":
optinsValue = json_array[32].澳门特别行政区;
break;
}
trim(optinsValue,city);
};
//转化为数据的形式为市select赋值，需要数据，以及select这个标签
function trim(obj,label){
for(var i = 0;i<obj.length;i++){
label.add(new Option(obj[i],obj[i]), null);
}
};
其实这代码也没什么可讲的，因为不怎么难，很容易看懂，我就挑重要的说下
for(var i = 0;i<json_array.length;i++){
var json_p = json_array[i].name;
Province.add(new Option(json_p,json_p), null);
}
这一行代码主要就是获取我们json文件里面所有的省份、直辖市啊、自治区的名称然后通过一个for循环将值赋给我们的select标签
主要就是通过了Province.add(new Option(json_p,json_p), null);这个方法将我们的值赋给我们的select标签，因为我们都知道select的子节点就是option
所以这里就直接new option()然后讲我们的值赋上，这里只是我们省份的代码
再看下我们显示市的代码，
//这个方法就是实现省市级联的核心方法，也是用来给市的select赋值
function changeCity() {
var Province = document.getElementById("Province");
var Provincevalue = Province.options[Province.selectedIndex].value;
var city = document.getElementById("city");
var optinsValue;
//获取json格式之后转化为数组
var json_array = eval(json);
//获取当前选中的省份Province.value;
city.options.length = 0; //清空城市
switch(Provincevalue){
case "北京市":
optinsValue = json_array[0].北京市;
break;
case "天津市":
optinsValue = json_array[1].天津市;
break;
case "河北省":
optinsValue = json_array[2].河北省;
break;
case "山西省":
optinsValue = json_array[3].山西省;
break;
case "内蒙古自治区":
optinsValue = json_array[4].内蒙古自治区;
break;
case "辽宁省":
optinsValue = json_array[5].辽宁省;
break;
case "吉林省":
optinsValue = json_array[6].吉林省;
break;
case "黑龙江省":
optinsValue = json_array[7].黑龙江省;
break;
case "上海市":
optinsValue = json_array[8].上海市;
break;
case "江苏省":
optinsValue = json_array[9].江苏省;
break;
case "浙江省":
optinsValue = json_array[10].浙江省;
break;
case "安徽省":
optinsValue = json_array[11].安徽省;
break;
case "福建省":
optinsValue = json_array[12].福建省;
break;
case "江西省":
optinsValue = json_array[13].江西省;
break;
case "山东省":
optinsValue = json_array[14].山东省;
break;
case "河南省":
optinsValue = json_array[15].河南省;
break;
case "湖北省":
optinsValue = json_array[16].湖北省;
break;
case "湖南省":
optinsValue = json_array[17].湖南省;
break;
case "广东省":
optinsValue = json_array[18].广东省;
break;
case "广西壮族自治区":
optinsValue = json_array[19].广西壮族自治区;
break;
case "海南省":
optinsValue = json_array[20].海南省;
break;
case "重庆市":
optinsValue = json_array[21].重庆市;
break;
case "四川省":
optinsValue = json_array[22].四川省;
break;
case "贵州省":
optinsValue = json_array[23].贵州省;
break;
case "云南省":
optinsValue = json_array[24].云南省;
break;
case "西藏自治区":
optinsValue = json_array[25].西藏自治区;
break;
case "陕西省":
optinsValue = json_array[26].陕西省;
break;
case "甘肃省":
optinsValue = json_array[27].甘肃省;
break;
case "青海省":
optinsValue = json_array[28].青海省;
break;
case "宁夏回族自治区":
optinsValue = json_array[29].宁夏回族自治区;
break;
case "新疆维吾尔自治区":
optinsValue = json_array[30].新疆维吾尔自治区;
break;
case "香港特别行政区":
optinsValue = json_array[31].香港特别行政区;
break;
case "澳门特别行政区":
optinsValue = json_array[32].澳门特别行政区;
break;
}
trim(optinsValue,city);
};
很多啊，都是一些case什么的，之前本来是不想写这么多的case的，想的是直接获取省份select的值然后在.出来的，可是出现了一个问题就是
.的时候js总是会把我们获取的到的值当成了key，所以获取市的时候就是一直弹出undefined，所以只能采取这样的办法，大家有什么办法可以向我反馈，感谢
为什么我在方法最后面会有一个trim方法，是因为我看到json市的数据的时候是使用，进行分割的，所以我就加了一个分割的方法，同时也把赋值放入了这个方法中
//转化为数据的形式为市select赋值，传入数据，以及select这个标签
function trim(obj,label){
for(var i = 0;i<obj.length;i++){
label.add(new Option(obj[i],obj[i]), null);
}
};
至此我们的整个效果就实现了，不是很难，在新建js文件的时候也会出现乱码问题，解决的办法上面已经介绍了，就不在论述了，赋值市的时候如果大家有什么好的办法，欢迎大家积极反馈
