简单实用jquery版三级联动select示例

209 阅读 0 评论 138 点赞

我是靠谱客的博主英勇冬日，最近开发中收集的这篇文章主要介绍简单实用jquery版三级联动select示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

html和js部分

复制代码代码如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=gbk /> 
<title>selectList</title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.selectList{width:200px;margin:50px auto;} 
</style> 
<script type="text/javascript" src="jquery1.7.1.js"></script> 
</head> 
<body> 
<div class="selectList"> 
<select class="province"> 
<option>请选择</option> 
</select> 
<select class="city"> 
<option>请选择</option> 
</select> 
<select class="district"> 
<option>请选择</option> 
</select> 
</div> 
<div class="selectList"> 
<select class="province"> 
<option>请选择</option> 
</select> 
<select class="city"> 
<option>请选择</option> 
</select> 
<select class="district"> 
<option>请选择</option> 
</select> 
</div> 
<script type="text/javascript"> 
$(function(){ 
$(".selectList").each(function(){ 
var url = "area.json"; 
var areaJson; 
var temp_html; 
var oProvince = $(this).find(".province"); 
var oCity = $(this).find(".city"); 
var oDistrict = $(this).find(".district"); 
//初始化省 
var province = function(){ 
$.each(areaJson,function(i,province){ 
temp_html+="<option value='"+province.p+"'>"+province.p+"</option>"; 
}); 
oProvince.html(temp_html); 
city(); 
}; 
//赋值市 
var city = function(){ 
temp_html = ""; 
var n = oProvince.get(0).selectedIndex; 
$.each(areaJson[n].c,function(i,city){ 
temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>"; 
}); 
oCity.html(temp_html); 
district(); 
}; 
//赋值县 
var district = function(){ 
temp_html = ""; 
var m = oProvince.get(0).selectedIndex; 
var n = oCity.get(0).selectedIndex; 
if(typeof(areaJson[m].c[n].d) == "undefined"){ 
oDistrict.css("display","none"); 
}else{ 
oDistrict.css("display","inline"); 
$.each(areaJson[m].c[n].d,function(i,district){ 
temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>"; 
}); 
oDistrict.html(temp_html); 
}; 
}; 
//选择省改变市 
oProvince.change(function(){ 
city(); 
}); 
//选择市改变县 
oCity.change(function(){ 
district(); 
}); 
//获取json数据 
$.getJSON(url,function(data){ 
areaJson = data; 
province(); 
}); 
}); 
}); 
</script> 
</body> 
</html> 

json文件（area.json），这里只是事例，根据情况添加或编写

复制代码代码如下:

 
[ 
{"p":"江西省", 
"c":[ 
{"ct":"南昌市", 
"d":[ 
{"dt":"西湖区"}, 
{"dt":"东湖区"}, 
{"dt":"高新区"} 
]}, 
{"ct":"赣州市", 
"d":[ 
{"dt":"瑞金县"}, 
{"dt":"南丰县"}, 
{"dt":"全南县"} 
]} 
]}, 
{"p":"北京", 
"c":[ 
{"ct":"东城区"}, 
{"ct":"西城区"} 
]}, 
{"p":"河北省", 
"c":[ 
{"ct":"石家庄", 
"d":[ 
{"dt":"长安区"}, 
{"dt":"桥东区"}, 
{"dt":"桥西区"} 
]}, 
{"ct":"唐山市", 
"d":[ 
{"dt":"滦南县"}, 
{"dt":"乐亭县"}, 
{"dt":"迁西县"} 
]} 
]} 
] 