多級數(shù)據(jù)級聯(lián)選擇，附省市縣級聯(lián)選擇功能   -----   JQUERY特效模板

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

   在這種方法中最重要的是級聯(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é)點(diǎn)1的id] = ['一級節(jié)點(diǎn)1的名稱',
                       ['二級節(jié)點(diǎn)11的名稱','三級節(jié)點(diǎn)111的名稱','三級節(jié)點(diǎn)112的名稱',…,'三級節(jié)點(diǎn)11n的名稱'],
                       ['二級節(jié)點(diǎn)12的名稱','三級節(jié)點(diǎn)121的名稱','三級節(jié)點(diǎn)122的名稱',…,'三級節(jié)點(diǎn)12n的名稱'],
                       …,
                       ['二級節(jié)點(diǎn)1n的名稱','三級節(jié)點(diǎn)1n1的名稱','三級節(jié)點(diǎn)1n2的名稱',…,'三級節(jié)點(diǎn)1nn的名稱']
                     ];
data[一級節(jié)點(diǎn)2的id] = ['一級節(jié)點(diǎn)2的名稱',
                       ['二級節(jié)點(diǎn)21的名稱','三級節(jié)點(diǎn)211的名稱','三級節(jié)點(diǎn)212的名稱',…,'三級節(jié)點(diǎn)21n的名稱'],
                       ['二級節(jié)點(diǎn)22的名稱','三級節(jié)點(diǎn)221的名稱','三級節(jié)點(diǎn)222的名稱',…,'三級節(jié)點(diǎn)22n的名稱'],
                       …,
                       ['二級節(jié)點(diǎn)2n的名稱','三級節(jié)點(diǎn)2n1的名稱','三級節(jié)點(diǎn)2n2的名稱',…,'三級節(jié)點(diǎn)2nn的名稱']
                     ];
………
data[一級節(jié)點(diǎn)n的id] = ['一級節(jié)點(diǎn)n的名稱',
                       ['二級節(jié)點(diǎn)n1的名稱','三級節(jié)點(diǎn)n11的名稱','三級節(jié)點(diǎn)n12的名稱',…,'三級節(jié)點(diǎn)n1n的名稱'],
                       ['二級節(jié)點(diǎn)n2的名稱','三級節(jié)點(diǎn)n21的名稱','三級節(jié)點(diǎn)n22的名稱',…,'三級節(jié)點(diǎn)n2n的名稱'],
                       …,
                       ['二級節(jié)點(diǎn)nn的名稱','三級節(jié)點(diǎn)nn1的名稱','三級節(jié)點(diǎn)nn2的名稱',…,'三級節(jié)點(diǎn)nnn的名稱']
                     ];

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

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

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

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

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

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

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