多個列表框聯動，不算是啥大問題，但是卻挺麻煩，那么怎么才能夠盡量方便一點呢？網上搜了一下，沒發現太好用的，於是就自己寫了一個。基於jQuery，無限級聯動，支持下拉列表框和列表框。
先說一下步驟和使用方法：
1、在頁面里設置列表框
城市：<select name="c5118020" id="ctrl_001" > <option value="-99999">請選擇</option><option value="1">沈陽</option><option value="2">撫順</option><option value="3">鞍山</option><option value="4">營口</option><option value="5">大連</option> </select><br/> 區縣：<select size="1" name="c5118030" id="ctrl_002"> <option value="1">請先選擇城市</option> </select><br/> 街道：<select id="ctrl_003" name="c5118040" > <option value="1">請先選擇區縣</option> </select><br/> 社區：<select id="ctrl_004" name="c5118050" > <option value="1">請先選擇街道</option> </select>
排版布局可以隨意設定，id、name、css等都沒有任何限制。
2、引用js
<script language="javascript" type="text/javascript" src="nature.head.js"></script> <script language="javascript" type="text/javascript" src="jquery-1.8.2.min.js"></script> <script language="javascript" type="text/javascript" src="Nature.Control.Base.js"></script> <script language="javascript" type="text/javascript" src="Nature.Control.Base.UnionList.js"></script>
3、設置聯動列表框的屬性和事件
var uLst; window.onload = function () { //定義需要的屬性 var lstEvent = { lstObjects: [$("#ctrl_001"), $("#ctrl_002"), $("#ctrl_003"), $("#ctrl_004")], //聯動列表的集合，數組形式 ajaxPara: [{}, {}, {}, {}], //訪問ajax的參數，結構可以自行定義，聯動列表框只負責傳遞 //列表框的change事件。 //selectValue：列表框選擇的值， //lst：下一個列表框的對象， //ajaxPara：調用下一個列表框需要的參數 //callback：回調函數，觸發列表框的change事件，也可以直接寫lst.change(); lstChange: function (selectValue, lst, ajaxPara, callback) { //alert(selectValue); //alert(lst); /* 模擬操作。您可以根據自己的需求改成ajax的方式，ajaxPara：調用下一個列表框需要的參數 如果采用ajax的方式來獲取記錄集，那么請在數據請求完畢之后，並且綁定列表框之后再調用callback */ lst.append("<option value='" + selectValue + "_1'>" + selectValue + "_text1</option>"); lst.append("<option value='" + selectValue + "_2'>" + selectValue + "_text2</option>"); lst.append("<option value='" + selectValue + "_3'>" + selectValue + "_text3</option>"); lst.append("<option value='" + selectValue + "_4'>" + selectValue + "_text4</option>"); callback(lst); } }; //實例基礎控件 var baseCtrl = new Nature.Controls.BaseControl({}); //創建聯動列表框 uLst = baseCtrl.UnionList(lstEvent); };
lstEvent 屬性說明
lstObjects：數組形式，里面存放列表框，請注意先后順序，第一級放在第一位，第二級放在第二位，以此類推。順序不能弄錯。
ajaxPara：大多數聯動，都是用ajax的方式來獲取選項，使用ajax就需要一些參數，那么可以把需要的參數放在這里，然后在change事件里，可以得到對應的列表框的選項需要的參數。
lstChange：任何一個列表框的選項發生變化，都會觸發這個事件，在這里可以實現填充下一個列表框的選項。由於大部分獲取選項都是使用ajax異步的方式，所以設置了一個回調函數，這樣在ajax獲取選項之后，可以通過callback的方式來回調，也就是觸發下一個列表框的change事件。
=========================================
基本情況就是這樣了。然后在說一下如何獲取列表框的選項。
獲取列表框的選項（option、item）有很多很多種方法，記錄集的格式也是千差萬別，所以也沒法集合到聯動列表框內部。另外本着單一職責和低耦合的原則，還有更通用一點的需求，也是應該把獲取列表框的選項的功能放在外部處理。
在頁面里直接獲取選項，可以用ajax，也可以用其他的方式。由於沒有把這個功能放在內部實現，所以就做了一個很簡單的演示，模擬一個假數據。根據上一個列表框的選擇值，來設定下一個列表框的text。這樣是想有一個比較明顯的區分。
最后是在線演示
ps：
1、優缺點
優點是比較通用，能夠方便一點點。缺點是，還是太麻煩。
做完了自后，有重新想了一遍，這么做比直接實現到底有啥區別呢？好像也沒啥大的區別嘛，哈哈。怪不得網上沒啥知名的聯動列表框呢，原來這個東東比較雞肋，哈哈。
2、有待完善的地方
其實聯動列表框的難點不是如何聯動，而是如何設置默認選項。比如在修改記錄時，字段值是 沈陽市、和平區、某某街道、某某社區，那么就應該把列表框的默認選項給設置上。但是選項是動態生成的，而且還是ajax獲取的，這個問題想了好幾天，截止到現在才有了一個明確的思路。不知道您有沒有什么好的辦法。