简单jquery实现select三级联动
Posted zqifa
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单jquery实现select三级联动相关的知识，希望对你有一定的参考价值。
简单的jquery实现select三级联动
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>selectList</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 .selectList{width:200px;margin:50px auto;} 9 </style> 10 <script type="text/javascript" src="jquery1.7.1.js"></script> 11 </head> 12 <body> 13 <div class="selectList"> 14 <select class="province"> 15 <option>请选择</option> 16 </select> 17 <select class="city"> 18 <option>请选择</option> 19 </select> 20 <select class="district"> 21 <option>请选择</option> 22 </select> 23 </div> 24 <div class="selectList"> 25 <select class="province"> 26 <option>请选择</option> 27 </select> 28 <select class="city"> 29 <option>请选择</option> 30 </select> 31 <select class="district"> 32 <option>请选择</option> 33 </select> 34 </div> 35 <script type="text/javascript"> 36 $(function(){ 37 $(".selectList").each(function(){ 38 var url = "area.json"; 39 var areaJson; 40 var temp_html; 41 var oProvince = $(this).find(".province"); 42 var oCity = $(this).find(".city"); 43 var oDistrict = $(this).find(".district"); 44 //初始化省 45 var province = function(){ 46 $.each(areaJson,function(i,province){ 47 temp_html+="<option value=‘"+province.p+"‘>"+province.p+"</option>"; 48 }); 49 oProvince.html(temp_html); 50 city(); 51 }; 52 //赋值市 53 var city = function(){ 54 temp_html = ""; 55 var n = oProvince.get(0).selectedIndex; 56 $.each(areaJson[n].c,function(i,city){ 57 temp_html+="<option value=‘"+city.ct+"‘>"+city.ct+"</option>"; 58 }); 59 oCity.html(temp_html); 60 district(); 61 }; 62 //赋值县 63 var district = function(){ 64 temp_html = ""; 65 var m = oProvince.get(0).selectedIndex; 66 var n = oCity.get(0).selectedIndex; 67 if(typeof(areaJson[m].c[n].d) == "undefined"){ 68 oDistrict.css("display","none"); 69 }else{ 70 oDistrict.css("display","inline"); 71 $.each(areaJson[m].c[n].d,function(i,district){ 72 temp_html+="<option value=‘"+district.dt+"‘>"+district.dt+"</option>"; 73 }); 74 oDistrict.html(temp_html); 75 }; 76 }; 77 //选择省改变市 78 oProvince.change(function(){ 79 city(); 80 }); 81 //选择市改变县 82 oCity.change(function(){ 83 district(); 84 }); 85 //获取json数据 86 $.getJSON(url,function(data){ 87 areaJson = data; 88 province(); 89 }); 90 }); 91 }); 92 </script> 93 </body> 94 </html>
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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":"迁西县"}
]}
]}
]
以上是关于简单jquery实现select三级联动的主要内容，如果未能解决你的问题，请参考以下文章