最近，由于工作的需要，寫(xiě)了一個(gè)聯(lián)動(dòng)下拉列表控件，理論上支持N級(jí)聯(lián)動(dòng)，后臺(tái)可以使用Spring3 MVC的@ResponseBody標(biāo)注來(lái)返回?cái)?shù)據(jù)(我現(xiàn)在的項(xiàng)目就是使用這種方法)，也可以使用其他方式返回?cái)?shù)據(jù)，只要數(shù)據(jù)格式為json就行，且不局限于java語(yǔ)言代碼。

寫(xiě)的不好的地方，請(qǐng)大家多指教，如果哪位朋友有好的建議或想法，也希望您多多指教，您也可以修改此代碼并貼出來(lái)與大家共享。
有興趣的朋友可以更進(jìn)一步的增強(qiáng)：譬如緩存一些數(shù)據(jù)到客戶(hù)端，支持不調(diào)用后臺(tái)的獲取數(shù)據(jù)的方式，支持其他格式（xml等）的數(shù)據(jù)，等等。

廢話(huà)不說(shuō)了，直接貼代碼：

/** * LinkedSelect: 聯(lián)動(dòng)下拉框控件，支持N級(jí)聯(lián)動(dòng)。 * 根據(jù)每個(gè)Select的定義中的url和id為Select做初始化，后臺(tái)返回的數(shù)據(jù)為[{value:"",label:""},{value:"",label:""}]形式的數(shù)組json * @author senton * @version 1.0 * * 以選國(guó)家、省、市的聯(lián)動(dòng)為例，調(diào)用示例如下： * <pre> * // 聲明一個(gè)select變量 * var select = new LinkedSelect(); * // 調(diào)用selct的init()方法，注意，該方法的參數(shù)是一個(gè)數(shù)組，用[]括起來(lái)，每個(gè)select的定義用{}括起來(lái)，多個(gè)select定義之間以,分割 * select.init([ * { * id:"country", * url:"獲取country列表的url", * nullable:false, * defaultValue:2 * }, * { * id:"province", * url:"獲取province列表的url", * nullable:false * }, * { * id:"city", * url:"獲取city列表的url", * nullable:false * } * ]); * </pre> */ /** * 定義一個(gè)LinkedSelect函數(shù) */ function LinkedSelect(){ return this; } /** * LinkedSelect的初始化方法 * @param allSelectInputs 所有的需要聯(lián)動(dòng)顯示的下拉框，是一個(gè)數(shù)組。 * @returns */ LinkedSelect.prototype.init = function(allSelectInputs){ // 定義一個(gè)內(nèi)部方法，用于加載一個(gè)下拉框，參數(shù)： // allSelectInputs：所有的下拉框定義 // parentId: 上一個(gè)被選中的ID，即<option>的value屬性值 // currentIndex: 要初始化的下拉框在allSelectInputs中的索引 initNextSelect = function(allSelectInputs, parentId, currentIndex){ // 如果沒(méi)有allSelectInputs值或者allSelectInputs的長(zhǎng)度小于等于currentIndex，說(shuō)明沒(méi)有需要初始化的下拉框了，就返回 if(!allSelectInputs || allSelectInputs.length <= currentIndex){ return; } // 取出當(dāng)前需要初始化的select的定義 var currentSelect = allSelectInputs[currentIndex]; // 清空currentSelect的option $("#"+currentSelect.id).empty(); // 如果還有下一個(gè)，則為當(dāng)前的Select加上onchange事件 if(allSelectInputs.length > currentIndex + 1){ $("#"+currentSelect.id).unbind("change"); $("#"+currentSelect.id).bind("change", function(){ initNextSelect(allSelectInputs, $(this).val(), currentIndex + 1); }); } // 如果不是第一個(gè)，則需要判斷parentId是否為空，如果為空，則遞歸清空后面的所有下拉框 if(currentIndex != 0){ if(!parentId || parentId == ''){ $("#"+currentSelect.id).append("<option value=''></option>"); initNextSelect(allSelectInputs, $("#"+currentSelect.id).val(), currentIndex + 1); return; } } // 如果不為空，則根據(jù)parentId取出所有的SelectItem初始化currentSelect $.post(currentSelect.url, { parentId:parentId }, function(data){ // 如果currentSelect在被定義時(shí)nullable為true，則說(shuō)明可以為空，在第一個(gè)加上一個(gè)空的option if(currentSelect.nullable){ $("#"+currentSelect.id).append("<option value=''></option>"); } // 取出所有的selectItem加到currentSelect上 $.each(data, function (index, selectItem) { // 如果currentSelect在被定義時(shí)的defaultValue等于當(dāng)前selectItem的值，則選中它 if(selectItem.value == currentSelect.defaultValue){ $("#"+currentSelect.id).append("<option selected='selected' value='" + selectItem.value + "'>" + selectItem.label + "</option>"); } else { $("#"+currentSelect.id).append("<option value='" + selectItem.value + "'>" + selectItem.label + "</option>"); } }); // 初始化完畢后，取出當(dāng)前currentSelect選中的值，作為parentId初始化下一個(gè)select initNextSelect(allSelectInputs, $("#"+currentSelect.id).val(), currentIndex + 1); },"json" ); }; // 調(diào)用initNextSelect，啟動(dòng)第一個(gè)下拉框的加載 initNextSelect(allSelectInputs, "", 0); };

一個(gè)支持N級(jí)下拉列表聯(lián)動(dòng)的控件