多個列表框聯動，不算是啥大問題，但是卻挺麻煩，那麼怎麼才能夠儘量方便一點呢？網上搜了一下，沒發現太好用的，於是就自己寫了一個。基於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獲取的，這個問題想了好幾天，截止到現在才有了一個明確的思路。不知道您有沒有什麼好的辦法。