简单jquery实现select三级联动_html-js-css

概述简单的jquery实现select三级联动代码如下： html代码： <!DOCTYPE html><html><head><meta charset=&q

简单的jquery实现select三级联动

代码如下：

 1 <!DOCTYPE HTML> 2 <HTML 3 head 4 Meta charset="utf-8" /> 5 Title>selectList</ 6 style type="text/CSS" 7     *{margin:0;padding} 8     .selectListwIDth200px50px auto 9 style10 script ="text/JavaScript" src="jquery1.7.1.Js"></script11 12 body13     div class="selectList"14         select ="province"15             option>请选择16         select17         ="city"18             19         20         ="district"21             22         23     div24     25         26             27         28         29             30         31         32             33         34     35     ="text/JavaScript"36     $(function(){37         $(".selectList).each(38             var url = area.Json;39              areaJson;40              temp_HTML;41              oProvince = $(this).find(.province);42              oCity .city43              odistrict .district44             //初始化省45              province 46                 $.each(areaJson,(i,province){47                     temp_HTML+=<option value='+province.p'></option>48                 });49                 oProvince.HTML(temp_HTML);50                 city();51             };52             赋值市53              city 54                 temp_HTML ""; 55                  n  oProvince.get().selectedindex;56                 $.each(areaJson[n].c,city){57 city.ct58 59                 oCity.HTML(temp_HTML);60                 district();61 62             赋值县63              district 64 65                  m 66                  oCity.get(67                 if(typeof(areaJson[m].c[n].d) == undefined){68                     odistrict.CSS(display,1)">none69                 }else{70 inline71                     $.each(areaJson[m].c[n].d,district){72                         temp_HTMLdistrict.dt73                     });74                     odistrict.HTML(temp_HTML);75                 };76 77             选择省改变市78             oProvince.change(79 80             });81             选择市改变县82             oCity.change(83 84 85             获取Json数据86             $.getJsON(url,1)">(data){87                 areaJson  data;88                 province();89 90         });91     });92     93 94 >

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 >
<select >
<option>请选择</option>
</select>
<select >
<option>请选择</option>
</select>
<select >
<option>请选择</option>
</select>
</div>
<div >
<select >
<option>请选择</option>
</select>
<select >
<option>请选择</option>
</select>
<select >
<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,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,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":"迁西县"}
]}
]}
]