級聯下拉列表框這種常見的需求，相信大家都經常遇到，下面兩種寫法都曾運用在專案，測試是沒問題，但程式碼可能不是最好的，親如果有更好的建議，請留言給我哦～一起探討

注：資料若為 省市 資料，可利用省市聯動的特殊性(如省市縣的國標編碼，按每2位直接切斷判斷)，但這裡不做討論，親們有興趣可以查閱相關資料

第一種：強調複用性
1. 採用jQuery
利用class作為識別符，將級聯下拉列表框選出來。
當選項發生變化的時候，呼叫Ajax，訪問對應的資料檔案(.txt)。然後，將資料檔案解析後的資料加入到下一個下拉列表框，以此類推，所有的下拉列表框都可以做到級聯。
2. 資料採用txt
對於相對固定的資料可以採用txt來作為資料來源，每次釋出的時候都無需重新啟動伺服器。但是對於資料來源為動態源的情況，需要訪問資料庫。這時候只要修改對應的ajax訪問URL即可。

* 結論：採用高度抽象以後，每增加一個下拉列表框只需要2行即可，1行用來宣告下拉列表框，另一行用來定義下一個響應的下拉列表框ID。*

為了本文的可讀性，這裡給出關鍵的程式碼，需要全部程式碼的可以拉到最下面檢視複製
js

$(document).ready(function(){

    $(".cascade_drop_down").change(
        function () {
            var name = $(this).attr("name") + "_next";
            var next = $("#" + name).val();
            if
 
 (next == null || next == '') {
                return;
            }

            $("#" + next).empty();

            $.ajax({
                type:'post',
                url: $(this).val() + '.txt',
                data:'name=' + name + '&val=' + $(this).val(),
                dataType:'text'
 
,
                success:function(msg){
                    ops = msg.split("\n");
                    for (i = 0; i < ops.length; i++) {
                        $("#" + next).append(ops[i]);
                    }
                },
                error:function(){
                    alert("failed.");
                }
            });
        }
    )

});

html

<div>
<input type="hidden" id="province_next" name="province_next" value="city">
<input type="hidden" id="city_next" name="city_next" value="">

<select id="province" name="province" class="cascade_drop_down">
    <option value="beijing">北京</option>
    <option value="tianjin">天津</option>
    <option value="shanghai">上海</option>
</select>

<select id="city" name="city" class="cascade_drop_down">
</select>
</div>

第二種： html5分類篩選、級聯下拉

1、資料採用json
對於相對固定的資料可以採用json來作為資料來源，每次釋出的時候都無需重新啟動伺服器。但是對於資料來源為動態源的情況，需要訪問資料庫。這時候只要修改資料路徑

2、每個事件獨立，通過事件委託解決動態新增的子集也擁有對應的事件
程式碼對類名的依賴性比較強，理解起來相對簡單，使用時可以根據需求更改完善