©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>目标：
* 用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('<option
value="'+cityList[i]+'">'+cityList[i]+'</option>'); }
第二步，当点击第一级菜单的选项，对于第二级选项进行自动生成。第一级选项空选时，对第二级菜单的内容进行清空。第三级的菜单内容也清空。
//监听第一个下拉菜单的变动操作 $("#province").change(function(){
//当第一级下拉列表没选择值时，将二级下拉列表和三级同时设置为空 if(this.value==""){ $("#city").empty();
//二级联动设为空设为空 $("#city").append('<option value="">---请选择---</option>'); //region
$("#region").empty();//三级联动设为空设为空 $("#region").append('<option
value="">---请选择---</option>'); } if(this.value!=""){//第一级下拉菜单选择了值 $("#city").
empty();//先行置空，防止上次选择留下的元素影响效果 $("#city").append('<option
value="">---请选择---</option>')//设置初始选项 $t = this.value; $titleList = cityParms[$t
];//根据第一级的关键字，获得对应的市级数据 for(var i = 0; i < $titleList.length;i++){//遍历 $("#city"
).append('<option value="'+$titleList[i]+'">'+$titleList[i]+'</option>');//创造元素
} } });
第三步，当第二级菜单选择了某项，根据选项生成第三级菜单。当第二选项选择空的时候，对于第三级菜单进行清空。
//监听第二个下拉菜单的变动操作 $("#city").change(function(){ if(this.value==""){
//第二级菜单为空，则将第三级菜单也置为空 $("#region").empty(); $("#region").append('<option
value="">---请选择---</option>'); } if(this.value!=""){//第二级菜单不为空，则将第三级菜单动态生成 $t =
this.value; $titleList = cityParmsList[$t];//根据第二级菜单的内容获得区数据 for(var i = 0; i <
$titleList.length;i++){//对区数据进行遍历，动态生成 $("#region").append('<option value="'+
$titleList[i]+'">'+$titleList[i]+'</option>'); } } })
<>完整代码：
<!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('<option value="'+cityList[i]+'">'+cityList[i]+'</option>');
} //监听第一个下拉菜单的变动操作 $("#province").change(function(){
//当第一级下拉列表没选择值时，将二级下拉列表和三级同时设置为空 if(this.value==""){ $("#city").empty();
//二级联动设为空设为空 $("#city").append('<option value="">---请选择---</option>'); //region
$("#region").empty();//三级联动设为空设为空 $("#region").append('<option
value="">---请选择---</option>'); } if(this.value!=""){ $("#city").empty(); $(
"#city").append('<option value="">---请选择---</option>') $t = this.value;
$titleList= cityParms[$t]; for(var i = 0; i < $titleList.length;i++){ $("#city")
.append('<option value="'+$titleList[i]+'">'+$titleList[i]+'</option>'); } } });
//监听第二个下拉菜单的变动操作 $("#city").change(function(){ if(this.value==""){ $("#region").
empty(); $("#region").append('<option value="">---请选择---</option>'); } if(this.
value!=""){ $t = this.value; $titleList = cityParmsList[$t]; for(var i = 0; i <
$titleList.length;i++){ $("#region").append('<option value="'+$titleList[i]+'">'
+$titleList[i]+'</option>'); } } }) </script> </html>
<>效果演示：