一個支援N級下拉式清單聯動的控制項

      最近，由於工作的需要，寫了一個聯動下拉式清單控制項，理論上支援N級聯動，後台可以使用Spring3 MVC的@ResponseBody標註來返回資料(我現在的項目就是使用這種方法)，也可以使用其他方式返回資料，只要資料格式為json就行，且不局限於java語言代碼。 

      寫的不好的地方，請大家多指教，如果哪位朋友有好的建議或想法，也希望您多多指教，您也可以修改此代碼並貼出來與大家共用。 
      有興趣的朋友可以更進一步的增強：譬如緩衝一些資料到用戶端，支援不調用背景擷取資料的方式，支援其他格式（xml等）的資料，等等。 

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

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