簡單實用jquery版三級聯(lián)動select示例

更新時間：2013年07月04日 16:58:19 作者：

本文主要為大家介紹下通過jquery實現(xiàn)三級聯(lián)動select這里用到的json文件，只是事例，根據(jù)情況添加或編寫，感興趣的朋友可以參考下哈，希望對大家有所幫助

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數(shù)據(jù) 
$.getJSON(url,function(data){ 
areaJson = data; 
province(); 
}); 
}); 
}); 
</script> 
</body> 
</html> 

json文件（area.json），這里只是事例，根據(jù)情況添加或編寫

復制代碼代碼如下:

 
[ 
{"p":"江西省", 
"c":[ 
{"ct":"南昌市", 
"d":[ 
{"dt":"西湖區(qū)"}, 
{"dt":"東湖區(qū)"}, 
{"dt":"高新區(qū)"} 
]}, 
{"ct":"贛州市", 
"d":[ 
{"dt":"瑞金縣"}, 
{"dt":"南豐縣"}, 
{"dt":"全南縣"} 
]} 
]}, 
{"p":"北京", 
"c":[ 
{"ct":"東城區(qū)"}, 
{"ct":"西城區(qū)"} 
]}, 
{"p":"河北省", 
"c":[ 
{"ct":"石家莊", 
"d":[ 
{"dt":"長安區(qū)"}, 
{"dt":"橋東區(qū)"}, 
{"dt":"橋西區(qū)"} 
]}, 
{"ct":"唐山市", 
"d":[ 
{"dt":"灤南縣"}, 
{"dt":"樂亭縣"}, 
{"dt":"遷西縣"} 
]} 
]} 
] 

各位最好自己封裝成插件，方便調(diào)用

您可能感興趣的文章:

jQuery+CSS實現(xiàn)一個側(cè)滑導航菜單代碼
側(cè)滑菜單在網(wǎng)站設計中應用比較廣泛，在許多網(wǎng)站上都可以看到此種類型的菜單。本文給大家介紹jQuery+CSS實現(xiàn)一個側(cè)滑導航菜單代碼，需要的朋友參考下吧
2016-05-05
自動設置iframe大小的jQuery代碼
自動設置iframe的寬度在應用中還是比較廣泛的，本文使用jquery實現(xiàn)一下，感興趣的朋友可以參考下
2013-09-09
jQuery+css實現(xiàn)炫目的動態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實現(xiàn)的動態(tài)塊漂移效果,涉及jQuery基于隨機數(shù)與時間函數(shù)動態(tài)操作頁面元素樣式的相關技巧,需要的朋友可以參考下
2016-01-01
js前臺判斷開始時間是否小于結束時間
js前臺判斷開始時間是否小于結束時間,結合了jquery需要的朋友可以參考下
2012-02-02
基于jQuery和Bootstrap框架實現(xiàn)仿知乎前端動態(tài)列表效果
最近基于jQuery和Bootstrap框架實現(xiàn)了一個仿知乎動態(tài)列表的前端效果，基本實現(xiàn)了和知乎動態(tài)列表相同的效果，下面小編通過本文給大家分享實現(xiàn)思路及代碼，對bootstrap 實現(xiàn)仿知乎前端動態(tài)列表效果感興趣的朋友一起看看吧
2016-11-11
jQuery 跨域訪問問題解決方法
瀏覽器端跨域訪問一直是個問題, 多數(shù)研發(fā)人員對待js的態(tài)度都是好了傷疤忘了疼,所以病發(fā)的時候,時不時地都要疼上一疼.記得很久以前使用iframe 加script domain 聲明,yahoo js util 的方式解決二級域名跨域訪問的問題.
2009-12-12
運用jQuery寫的驗證表單(實例講解)
下面小編就為大家?guī)硪黄\用jQuery寫的驗證表單(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
實例代碼詳解jquery.slides.js
slides是一款強大的，專業(yè)的幻燈片組件，能夠全方位對幻燈片的速度控制，本文通過代碼實例給大家講解jquery.slides.js，感興趣的朋友一起學習
2015-11-11
整理的40個有用的jQuery技術和教程
jQuery確實是一項偉大的技術，通過jQuery的插件，我們可以方便的創(chuàng)建具有更好用戶界面的網(wǎng)站。在本文中，將和大家分享40個對你創(chuàng)建更好用戶界面的jQuery技術和教程。
2011-01-01
jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHei
jQuery的位置函數(shù)(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小應用
2010-03-03