首页 > 代码库 > 简单jquery实现select三级联动

简单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=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+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="http://www.mamicode.com/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=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+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三级联动