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

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

廢話不說了，直接貼代碼：

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

一個支持N級下拉列表聯(lián)動的控件