快捷導(dǎo)航

jquery+json 通用三級聯(lián)動下拉列表

更新時間：2010年04月19日 22:28:15 作者：

用Jquery實現(xiàn)，原始代碼只支持IE，這里我改了一下，我的代碼里面有三個版本的實現(xiàn)

Author: shaoyun
Email: shaoyun (at) yeah.net
Date: 2010-03-10 02:03
Blog: http://shaoyun.cnblogs.com/

用Jquery實現(xiàn)，原始代碼只支持IE，這里我改了一下，我的代碼里面有三個版本的實現(xiàn)
第一個是通過讀取XML構(gòu)建，支持IE/firefox，chrome不支持，有興趣的可以將讀取XML的部分改成AJAX的方式，這樣chrome支持就不成問題
第二個是采用Json數(shù)據(jù)格式構(gòu)建，是我的第二次嘗試改進
第三個與第二個其實是一樣的，只不過將數(shù)據(jù)分離到JS文件中，我的代碼中有一個ASP文件，是調(diào)用數(shù)據(jù)庫生成Json省市區(qū)數(shù)據(jù)的，如果頁面直接調(diào)用ASP文件，速度會很慢，生成JS文件后直接調(diào)用就要快的多，而且這部分?jǐn)?shù)據(jù)一般不會改動

更新記錄：

++2010-04-19 12:11:24
多加了一個插件的例子，其實不算插件，就是一函數(shù)，為什么不寫成插件，只是基于靈活性的考慮，
讓select可以放在頁面的任何位置，而不是局限在div、table、td等頁面元素內(nèi)
參數(shù)類似下面，s1/s2/s3配置select的id，v1/v2/v3為默認(rèn)值，如果不想設(shè)置請設(shè)置為null，或者直接不設(shè)置

參數(shù)配置如下，配置select的三個ID和默認(rèn)值就行，無默認(rèn)值填寫為null

復(fù)制代碼代碼如下:

 
var defaults = { 
s1:'Select1', 
s2:'Select2', 
s3:'Select3', 
v1:null, 
v2:null, 
v3:null 
}; 

這算是第四個例子，目錄下的php文件是服務(wù)端數(shù)據(jù)的生成Demo,用作使用的參考

數(shù)據(jù)格式定義類似如下：

復(fù)制代碼代碼如下:

 
var threeSelectData={ 
"省份":{val:"",items:{"城市":{val:"",items:{"區(qū)縣":""}}}}, 
"beijing":{val:"01",items:{ 
"bj-01":{val:"0101",items:{ 
"bj-01-01":"010101" 
}}, 
"bj-02":{val:"0102",items:{ 
"bj-02-01":"010201", 
"bj-02-02":"010202" 
}} 
}}, 
"shanxi":{val:"02",items:{}}, 
"guangzhou":{val:"02",items:{}} 
}; 

代碼例子：

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="areadata.js"></script> 
<script type="text/javascript"> 
/* 
通用三級聯(lián)動說明 
參數(shù)配置如下，配置select的三個ID和默認(rèn)值就行，無默認(rèn)值填寫為null 
var defaults = { 
s1:'Select1', 
s2:'Select2', 
s3:'Select3', 
v1:null, 
v2:null, 
v3:null 
}; 
*/ 
var defaults = { 
s1:'Select1', 
s2:'Select2', 
s3:'Select3', 
v1:120000, 
v2:120200, 
v3:120224 
}; 
$(function(){ 
threeSelect(defaults); 
}); 
function threeSelect(config){ 
var $s1=$("#"+config.s1); 
var $s2=$("#"+config.s2); 
var $s3=$("#"+config.s3); 
var v1=config.v1?config.v1:null; 
var v2=config.v2?config.v2:null; 
var v3=config.v3?config.v3:null; 
$.each(threeSelectData,function(k,v){ 
appendOptionTo($s1,k,v.val,v1); 
}); 
$s1.change(function(){ 
$s2.html(""); 
$s3.html(""); 
if(this.selectedIndex==-1) return; 
var s1_curr_val = this.options[this.selectedIndex].value; 
$.each(threeSelectData,function(k,v){ 
if(s1_curr_val==v.val){ 
if(v.items){ 
$.each(v.items,function(k,v){ 
appendOptionTo($s2,k,v.val,v2); 
}); 
} 
} 
}); 
if($s2[0].options.length==0){appendOptionTo($s2,"...","",v2);} 
$s2.change(); 
}).change(); 
$s2.change(function(){ 
$s3.html(""); 
var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value; 
if(this.selectedIndex==-1) return; 
var s2_curr_val = this.options[this.selectedIndex].value; 
$.each(threeSelectData,function(k,v){ 
if(s1_curr_val==v.val){ 
if(v.items){ 
$.each(v.items,function(k,v){ 
if(s2_curr_val==v.val){ 
$.each(v.items,function(k,v){ 
appendOptionTo($s3,k,v,v3); 
}); 
} 
}); 
if($s3[0].options.length==0){appendOptionTo($s3,"...","",v3);} 
} 
} 
}); 
}).change(); 
function appendOptionTo($o,k,v,d){ 
var $opt=$("<option>").text(k).val(v); 
if(v==d){$opt.attr("selected", "selected")} 
$opt.appendTo($o); 
} 
} 
</script> 
<style type="text/css" media="screen"> 
select{width:80px;} 
</style> 
<select id="Select1" name="Select1"></select> 
<select id="Select2" name="Select2"></select> 
<select id="Select3" name="Select3"></select> 