现在位置首页 / 项目实战 /正文

jquery ajax 多级联动 下拉框 Demo

作者: IT小兵 | 2015年8月7日| 热度:℃ | 评论: |参与:

写了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


原文:http://www.cnblogs.com/cl-blogs/p/4708102.html


参考:

[jquery 自定义datalist/下拉框插件:datalist]

[javascript+html5+css3仿淘宝下拉刷新 数据效果]

[ztree教程--zTree实现文本框输入关键词自动匹配下拉效果]

[ztree教程--两个ztree树并存实现下拉框]

[Jquery 下拉框美化自动补齐分组插件-Select2最新版使用说明]

[jquery 可编辑的下拉框(select)修改完善版]

[使用asp.net UpdatePanel无刷新二级联动省级城市下拉选择框自定义控件]

[Jquery三级省市区县联动选择下拉菜单--自带全国完整xml数据]

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询