簡單實用jquery版三級連動select範例_jquery

html和js部分

複製代碼代碼如下：

gt ;



selectList標題>

*{margin:0;padding:0;}
.selectList{width:200px;margin:50px auto;}
;

頭>

請選擇選項>;
選擇>

請選擇選項>;
選擇>

請選擇選項>;
選擇>

請選擇選項>;
選擇>

請選擇選項> ;
選擇>

請選擇選項>;
選擇>

$(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 ="" 省.p "選項>";
});
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 ="" city.ct "")
oCity.html(temp_html);
district();
//屬性縣
var District = function(){
temp_html = ""; m = oProvince.get(0).selectedIndex;
var n = oCity.get(0).selectedIndex;
if(typeof(areaJson[m].c[n].d) == "未定義" ){
oDistrict.css("顯示","無");
}else{
oDistrict.css("顯示","內聯");
$.each(areaJson[m].c[n].d, function(i,district){
temp_html =""district.dt “選項>”
});
oDistrict.html(temp_html) ;
};
};
//選擇省改市
oProvince.change(function(){
city();
});
//選擇市改縣
oCity.change(function(){
district();
});
//取得json資料
$.getJSON(url,function(data){
areaJson = data;
province();
});
});
});
腳本>
身體>
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":"遷西縣"}
]}
]}
]


各位最好自己封裝製作插件，方便呼叫