ajax 多級聯動 下拉框 Demo

寫了ajax實現級聯下拉框，考慮經常使用，而且級聯個數隨不一樣業務個數不一樣，因而就整理了一下，實現了 ajax + N級聯動 下拉框的效果

 效果圖

HTML 代碼

    <h2> 省級聯動</h2>
    <div class="city" >
            <select id="SelProvince" class="select"></select>
            <select id="SelCity" class="select"></select>
            <select id="SelArea" class="select"></select>
            <select id="SelXian" class="select"></select>
    </div> 

     <h2> 市區聯動</h2>
    <div class="city" >
            <select id="Select1" class="select"></select>
            <select id="Select2" class="select"></select>
            <select id="Select3" class="select"></select>
    </div> 

js 綁定

 引入jQuery 和 jquery.cascadeselect.js 兩個文件（下面會貼出文件下載地址）

 <script type="text/javascript">
        $(function () {
            
            $.fn.CascadeSelect({
                url: '/CascadeSelect/CascadeSelect.ashx',  //返回Json數據的通常處理文件
                idKey: 'Id',     // 綁定下拉框實際值的字段
                nameKey: 'Name', // 綁定下拉框顯示值的字段
                casTopId: 0,  // 頂級節點ParentId
                casCount: 4,  // 級聯個數
                casObjId: ['SelProvince', 'SelCity', 'SelArea', 'SelXian'], // 級聯下拉框id
                casDefVal: ['全國', 5, '益陽', 22], // 級聯默認值(Id,Name均可以)
            });

              $.fn.CascadeSelect({
                url: '/CascadeSelect/CascadeSelect.ashx',  //返回Json數據的通常處理文件
                idKey: 'Id',   // 綁定下拉框實際值的字段
                nameKey: 'Name', // 綁定下拉框顯示值的字段
                casTopId: 1,  // 頂級節點ParentId
                casCount: 3, // 級聯個數
                casObjId: ['Select1', 'Select2', 'Select3'], // 級聯下拉框id
                casDefVal: [5, '益陽', 22], // 級聯默認值(Id,Name均可以)
            });
        });
     </script>

 jquery.cascadeselect.js 源碼：

$(function ($) {
    cas_settings = {};
    $.fn.CascadeSelect = function (options) {
        
        var cas_setId = options['casObjId'][0];
        cas_settings[cas_setId] = 
        {
            url: 'xxoo.ashx',  //返回Json數據的通常處理文件
            idKey: 'id',
            nameKey: 'name',
            casTopId: 0 ,    // 頂級節點ParentId
            casCount: 3,   // 級聯個數
            casObjId: [],  // 級聯下拉框id
            casDefVal: [], // 級聯默認值 
        };
        $.extend(cas_settings[cas_setId], options); 
        // ----------------->   
    }

    // 加載級聯數據
    function LoadCasData(curLevel, cas_setId, ParentID) {
        if (curLevel > cas_settings[cas_setId].casCount) return; 

        var cid = cas_settings[cas_setId].casObjId[curLevel - 1]; // 下拉框id
        var cdefval = cas_settings[cas_setId].casDefVal[curLevel - 1]; //默認值
        var idKey = cas_settings[cas_setId].idKey;
        var nameKey = cas_settings[cas_setId].nameKey;
        var CPID = 0;  //市級所須要的父級ID

        var curObj = $('#' + cid); // 當前下拉框
        curObj.empty(); //清空下拉框 
        if (ParentID == undefined) {
            LoadCasData(curLevel + 1, cas_setId);
            return;
        } 

        $.ajax({
            url: cas_settings[cas_setId].url, type: 'post', data: { Level: curLevel, ParentID: ParentID }, dataType: 'json', async: false
                , success: function (data) {
                    if (data.length == 0) {
                        LoadCasData(curLevel + 1, cas_setId); // 加載子項數據
                        return;
                    }

                    CPID = data[0][idKey];   //若是沒有傳入參數，系統默認父級第一個ID
                    for (var i = 0; i < data.length; i++) {
                        if (data[i][idKey] == cdefval || data[i][nameKey] == cdefval ) {
                            CPID = data[i][idKey];  // 選中默認值
                            curObj.append(" <option value='" + data[i][idKey] + "' selected='selected'>" + data[i][nameKey] + "</option>");
                        } else {
                            curObj.append(" <option value='" + data[i][idKey] + "'>" + data[i][nameKey] + "</option>");
                        }
                    }

                     
                       
                    LoadCasData(curLevel + 1, cas_setId, CPID); // 加載子項數據
                    return;
                }
            , error: function () {
                console.log('加載數據出錯！');
            }
            });

    }

    // 設置下拉框級別
    function SetCasLevel(cas_setId) {
        for (var i = 0; i < cas_settings[cas_setId].casCount; i++) {
            var cid = cas_settings[cas_setId].casObjId[i]; // 下拉框id 
            $('#' + cid).data('level', i + 1); // 當前下拉框級別
            $('#' + cid).data('setid', cas_setId); // 配置信息Id

            //下拉框改變
            $('#' + cid).change(function () {
                var CPID = $(this).val();
                LoadCasData($(this).data('level') + 1, $(this).data('setid'),CPID);
            });
        }
    }

    // 頁面加載
    $(function () {
        for (var cas_setId in cas_settings) {
            console.log(cas_setId);
            SetCasLevel(cas_setId);
            LoadCasData(1, cas_setId, cas_settings[cas_setId].casTopId);
        }
    });

});

View Code

 

 

 日後臺傳遞的參數： 

Level 級聯級別 1開始
ParentID 父級ID

後臺頁面兩種狀況：

一、省市區是一個表（表結構是Id,Name,ParentId） 自聯接查詢的話，後臺頁面根據ParentId查詢數據便可
二、省市區在不一樣的表，可一個根據 Level 級聯級別分別查詢數據，可是省市區返回數據實體得同樣，也就是列名得一致
     返回數據的格式：[{"Id":value,"Name":value},{"Id":value,"Name":value}] 
     綁定的時候能夠設置這兩個字段值：（idKey: 'Id', // 綁定下拉框實際值的字段 nameKey: 'Name', // 綁定下拉框顯示值的字段） 

 

(js文件,源碼)案例下載：http://download.csdn.net/detail/qq_21533697/8968013
   交流羣 ： 84479667 

----------------end