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);
        }
    });

});

 

 

 往后台传递的参数： 

Level 级联级别 1开始
ParentID 父级ID

后台页面两种情况：

1、省市区是一个表（表结构是Id,Name,ParentId） 自联接查询的话，后台页面根据ParentId查询数据即可
2、省市区在不同的表，可一个根据 Level 级联级别分别查询数据，但是省市区返回数据实体得一样，也就是列名得一致
     返回数据的格式：[{"Id":value,"Name":value},{"Id":value,"Name":value}] 
     绑定的时候可以设置这两个字段值：（idKey: 'Id', // 绑定下拉框实际值的字段 nameKey: 'Name', // 绑定下拉框显示值的字段） 

 

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

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