Author: shaoyun
Email: shaoyun (at) yeah.net
Date: 2010-03-10 02:03
Blog: http://shaoyun.cnblogs.com/
用Jquery實(shí)現(xiàn)，原始代碼只支持IE，這里我改了一下，我的代碼里面有三個(gè)版本的實(shí)現(xiàn)
第一個(gè)是通過(guò)讀取XML構(gòu)建，支持IE/firefox，chrome不支持，有興趣的可以將讀取XML的部分改成AJAX的方式，這樣chrome支持就不成問(wèn)題
第二個(gè)是采用Json數(shù)據(jù)格式構(gòu)建，是我的第二次嘗試改進(jìn)
第三個(gè)與第二個(gè)其實(shí)是一樣的，只不過(guò)將數(shù)據(jù)分離到JS文件中，我的代碼中有一個(gè)ASP文件，是調(diào)用數(shù)據(jù)庫(kù)生成Json省市區(qū)數(shù)據(jù)的，如果頁(yè)面直接調(diào)用ASP文件，速度會(huì)很慢，生成JS文件后直接調(diào)用就要快的多，而且這部分?jǐn)?shù)據(jù)一般不會(huì)改動(dòng)
更新記錄：
++2010-04-19 12:11:24
多加了一個(gè)插件的例子，其實(shí)不算插件，就是一函數(shù)，為什么不寫(xiě)成插件，只是基于靈活性的考慮，
讓select可以放在頁(yè)面的任何位置，而不是局限在div、table、td等頁(yè)面元素內(nèi)
參數(shù)類(lèi)似下面，s1/s2/s3配置select的id，v1/v2/v3為默認(rèn)值，如果不想設(shè)置請(qǐng)?jiān)O(shè)置為null，或者直接不設(shè)置
參數(shù)配置如下，配置select的三個(gè)ID和默認(rèn)值就行，無(wú)默認(rèn)值填寫(xiě)為null
代碼如下:
var defaults = {
s1:'Select1',
s2:'Select2',
s3:'Select3',
v1:null,
v2:null,
v3:null
};
這算是第四個(gè)例子，目錄下的php文件是服務(wù)端數(shù)據(jù)的生成Demo,用作使用的參考
數(shù)據(jù)格式定義類(lèi)似如下：
代碼如下:
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:{}}
};
代碼例子：
代碼如下:
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="areadata.js"></script>
<script type="text/javascript">
/*
通用三級(jí)聯(lián)動(dòng)說(shuō)明
參數(shù)配置如下，配置select的三個(gè)ID和默認(rèn)值就行，無(wú)默認(rèn)值填寫(xiě)為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("");
