其實，這個功能網(wǎng)上也有很多功能模板，很多種方法都可以實現(xiàn)，都各有利弊，在此不對此做過多評價，這里只是提供另一種思路，也是我常用的一個辦法，便于擴(kuò)展，可適用于數(shù)據(jù)量不是很大（總數(shù)據(jù)可以支持到上萬，前提是每個數(shù)據(jù)不會很長，基本上可以覆蓋大多數(shù)的級聯(lián)選擇應(yīng)用）的多級級聯(lián)選擇。

創(chuàng)新互聯(lián)公司主營樂都網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),樂都h5重慶小程序開發(fā)公司搭建,樂都網(wǎng)站營銷推廣歡迎樂都等地區(qū)企業(yè)咨詢

   在這種方法中最重要的是級聯(lián)數(shù)據(jù)的組織方式，我是這么設(shè)置的：

       用一個js多維數(shù)組來保存級聯(lián)數(shù)據(jù)，一般來說，三級級聯(lián)選擇，需要一個二維數(shù)組，一個二級級聯(lián)選擇需要一個一維數(shù)組（就是普通數(shù)組），此處以三級級聯(lián)選擇為例。

var data = new Array();
data[一級節(jié)點1的id] = ['一級節(jié)點1的名稱',
                       ['二級節(jié)點11的名稱','三級節(jié)點111的名稱','三級節(jié)點112的名稱',…,'三級節(jié)點11n的名稱'],
                       ['二級節(jié)點12的名稱','三級節(jié)點121的名稱','三級節(jié)點122的名稱',…,'三級節(jié)點12n的名稱'],
                       …,
                       ['二級節(jié)點1n的名稱','三級節(jié)點1n1的名稱','三級節(jié)點1n2的名稱',…,'三級節(jié)點1nn的名稱']
                     ];
data[一級節(jié)點2的id] = ['一級節(jié)點2的名稱',
                       ['二級節(jié)點21的名稱','三級節(jié)點211的名稱','三級節(jié)點212的名稱',…,'三級節(jié)點21n的名稱'],
                       ['二級節(jié)點22的名稱','三級節(jié)點221的名稱','三級節(jié)點222的名稱',…,'三級節(jié)點22n的名稱'],
                       …,
                       ['二級節(jié)點2n的名稱','三級節(jié)點2n1的名稱','三級節(jié)點2n2的名稱',…,'三級節(jié)點2nn的名稱']
                     ];
………
data[一級節(jié)點n的id] = ['一級節(jié)點n的名稱',
                       ['二級節(jié)點n1的名稱','三級節(jié)點n11的名稱','三級節(jié)點n12的名稱',…,'三級節(jié)點n1n的名稱'],
                       ['二級節(jié)點n2的名稱','三級節(jié)點n21的名稱','三級節(jié)點n22的名稱',…,'三級節(jié)點n2n的名稱'],
                       …,
                       ['二級節(jié)點nn的名稱','三級節(jié)點nn1的名稱','三級節(jié)點nn2的名稱',…,'三級節(jié)點nnn的名稱']
                     ];

此時，獲取第一級select框的數(shù)據(jù)（既第一級節(jié)點數(shù)據(jù)）時可以只遍歷data數(shù)組:

var selector = $("#第一級select框id");
$.each(data,
    function(i,n)
    {
        selector.html('').append(""+n[0]+"");
    }
)

當(dāng)?shù)谝患塻elect框選中時，可以從對應(yīng)的data[一級選中節(jié)點id] 中遍歷生成第二級select框的數(shù)據(jù)

var selector = $("#第二級select框id");
$.each(data[一級選中節(jié)點的id],
    function(i,n)
    {
        //排除當(dāng)前所在第一級節(jié)點名稱
        if(i==0)continue;              
        selector.html('').append(""+n[0]+"");
    }
)

當(dāng)?shù)诙塻elect框選中時，可以從對應(yīng)的data[一級選中節(jié)點id][二級選中節(jié)點id] 中遍歷生成第三級select框的數(shù)據(jù)

var selector = $("#第三級select框id");
$.each(data[一級選中節(jié)點的id][二級選中節(jié)點的id],
    function(i,n)
    {
        //排除當(dāng)前所在第二級節(jié)點名稱
        if(i==0)continue;             
        selector.html('').append(""+n+"");
    }
)

具體實例可參考附件中地址級聯(lián)選擇功能，需要注意的是，附件中實例使用前，需設(shè)置省，市，縣三個選擇框的id到area_choose.js中