JS实现省市区三级联动
目标：
- 用JS实现省市区的三级联动效果
学习内容：
- 掌握JS对DOM元素的获取
- 掌握 JS对DOM元素的创建和删除
- 掌握JSON数组的简单解析
实现思路：
省市区三级联动主要是三个下拉菜单之间的联动效果，基本的需求是，当我点击第一级下拉菜单，第二级菜单的内容会自动匹配。选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。
准备工作，搭建页面结构，编写基本样式，引入JQuery文件。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
body{
font-size: 30px;
}
.select{
width: 300px;
height: 50px;
font-size: 28px;
}
#content{
margin-left: 300px;
margin-top: 50px;
}
style>
head>
<body>
<div id="content">
<div id="set">
省：<select class="select" name="province" id="province">
<option value="">---请选择---option>
select>
市：<select class="select" name="city" id="city">
<option value="">---请选择---option>
select>
区：<select class="select" name="region" id="region">
<option value="">---请选择---option>
select>
div>
div>
body>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
script>
html>
第一步，首先对于地名数据用JSON数组进行承载。当页面加载时对第一级下拉菜单进行自动生成。
//省名数据
var cityList = ["北京","上海","广州"];
//省和市数据
var cityParms = {"北京":["朝阳区","东城区","西城区"],
"上海":["黄浦区","徐汇区","闵行区","普陀区"],
"广州":["海珠区","天河区","白云区","花都区"]};
//城市的对应数据
var cityParmsList = {"朝阳区":["三里屯","香河园","和平街","潘家园"],
"东城区":["东华门","安定门","朝阳门","建国门","东直门"],
"西城区":["西长安","德胜街","大栅栏","什刹海"],
"黄浦区":["南京东路","外滩","豫园","五里桥"],
"徐汇区":["天平路","凌云路","徐家汇","龙华街"],
"闵行区":["江川路","新虹街","古美路","浦锦街"],
"普陀区":["长寿路","甘泉路","宜川路"],
"海珠区":["江海","瑞宝","沙园","滨江"],
"天河区":["天园","龙洞","沙河","凤凰"],
"白云区":["同德街","黄石街","金沙街","白云湖"],
"花都区":["花城街","新华街","新雅街"]
}
//第一级菜单初始化值
for(var i = 0; i < cityList.length;i++ ){
$("#province").append('cityList[i]+'">'+cityList[i]+'');
}
第二步，当点击第一级菜单的选项，对于第二级选项进行自动生成。第一级选项空选时，对第二级菜单的内容进行清空。第三级的菜单内容也清空。
//监听第一个下拉菜单的变动操作
$("#province").change(function(){
//当第一级下拉列表没选择值时，将二级下拉列表和三级同时设置为空
if(this.value==""){
$("#city").empty();//二级联动设为空设为空
$("#city").append('');
//region
$("#region").empty();//三级联动设为空设为空
$("#region").append('');
}
if(this.value!=""){//第一级下拉菜单选择了值
$("#city").empty();//先行置空，防止上次选择留下的元素影响效果
$("#city").append('')//设置初始选项
$t = this.value;
$titleList = cityParms[$t];//根据第一级的关键字，获得对应的市级数据
for(var i = 0; i < $titleList.length;i++){//遍历
$("#city").append('$titleList[i]+'">'+$titleList[i]+'');//创造元素
}
}
});
第三步，当第二级菜单选择了某项，根据选项生成第三级菜单。当第二选项选择空的时候，对于第三级菜单进行清空。
//监听第二个下拉菜单的变动操作
$("#city").change(function(){
if(this.value==""){//第二级菜单为空，则将第三级菜单也置为空
$("#region").empty();
$("#region").append('');
}
if(this.value!=""){//第二级菜单不为空，则将第三级菜单动态生成
$t = this.value;
$titleList = cityParmsList[$t];//根据第二级菜单的内容获得区数据
for(var i = 0; i < $titleList.length;i++){//对区数据进行遍历，动态生成
$("#region").append('$titleList[i]+'">'+$titleList[i]+'');
}
}
})
完整代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
body{
font-size: 30px;
}
.select{
width: 300px;
height: 50px;
font-size: 28px;
}
#content{
margin-left: 300px;
margin-top: 50px;
}
style>
head>
<body>
<div id="content">
<div id="set">
省：<select class="select" name="province" id="province">
<option value="">---请选择---option>
select>
市：<select class="select" name="city" id="city">
<option value="">---请选择---option>
select>
区：<select class="select" name="region" id="region">
<option value="">---请选择---option>
select>
div>
div>
body>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//省名数据
var cityList = ["北京","上海","广州"];
//省和市数据
var cityParms = {"北京":["朝阳区","东城区","西城区"],
"上海":["黄浦区","徐汇区","闵行区","普陀区"],
"广州":["海珠区","天河区","白云区","花都区"]};
//城市的对应数据
var cityParmsList = {"朝阳区":["三里屯","香河园","和平街","潘家园"],
"东城区":["东华门","安定门","朝阳门","建国门","东直门"],
"西城区":["西长安","德胜街","大栅栏","什刹海"],
"黄浦区":["南京东路","外滩","豫园","五里桥"],
"徐汇区":["天平路","凌云路","徐家汇","龙华街"],
"闵行区":["江川路","新虹街","古美路","浦锦街"],
"普陀区":["长寿路","甘泉路","宜川路"],
"海珠区":["江海","瑞宝","沙园","滨江"],
"天河区":["天园","龙洞","沙河","凤凰"],
"白云区":["同德街","黄石街","金沙街","白云湖"],
"花都区":["花城街","新华街","新雅街"]
}
//第一级菜单初始化值
for(var i = 0; i < cityList.length;i++ ){
$("#province").append('cityList[i]+'">'+cityList[i]+'');
}
//监听第一个下拉菜单的变动操作
$("#province").change(function(){
//当第一级下拉列表没选择值时，将二级下拉列表和三级同时设置为空
if(this.value==""){
$("#city").empty();//二级联动设为空设为空
$("#city").append('');
//region
$("#region").empty();//三级联动设为空设为空
$("#region").append('');
}
if(this.value!=""){
$("#city").empty();
$("#city").append('')
$t = this.value;
$titleList = cityParms[$t];
for(var i = 0; i < $titleList.length;i++){
$("#city").append('$titleList[i]+'">'+$titleList[i]+'');
}
}
});
//监听第二个下拉菜单的变动操作
$("#city").change(function(){
if(this.value==""){
$("#region").empty();
$("#region").append('');
}
if(this.value!=""){
$t = this.value;
$titleList = cityParmsList[$t];
for(var i = 0; i < $titleList.length;i++){
$("#region").append('$titleList[i]+'">'+$titleList[i]+'');
}
}
})
script>
html>
效果演示：
