用Jquery實現,原始程式碼只支援IE,這裡我改了一下,我的程式碼裡面有三個版本的實現
第一個是透過讀取XML構建,支援IE/firefox,chrome不支持,有興趣的可以將讀取XML的部分改成AJAX的方式,這樣chrome支持就不成問題
第二個是採用Json資料格式構建,是我的第二次嘗試改進
第三個與第二個其實是一樣的,只不過將資料分離到JS文件中,我的程式碼中有一個ASP文件,是呼叫資料庫產生Json省市區資料的,如果頁面直接呼叫ASP文件,速度會很慢,產生JS檔後直接呼叫就要快的多,而且這部分資料一般不會改動
多加了一個插件的例子,其實不算插件,就是一函數,為什麼不寫成插件,只是基於靈活性的考慮,
讓select可以放在頁面的任何位置,而不是侷限在div、table、td等頁面元素內
參數類似下面,s1/s2/s3配置select的id,v1/v2/v3為預設值,如果不想設定請設定為null,或直接不設定
參數配置如下,配置select的三個ID和預設值就行,無預設值填入null
var defaults = { s1:'Select1', s2:'Select2', s3:'Select3', v1:null, v2:null, v3:null };
這算是第四個例子,目錄下的php檔案是服務端資料的產生Demo,用作使用的參考
資料格式定義類似如下:
var threeSelectData={ "省份":{val:"",items:{"城市":{val:"",items:{"区县":""}}}}, "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:{}} };
程式碼範例: