资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

多级数据级联选择,附省市县级联选择功能 ----- JQUERY特效模板

   其实,这个功能网上也有很多功能模板,很多种方法都可以实现,都各有利弊,在此不对此做过多评价,这里只是提供另一种思路,也是我常用的一个办法,便于扩展,可适用于数据量不是很大(总数据可以支持到上万,前提是每个数据不会很长,基本上可以覆盖大多数的级联选择应用)的多级级联选择。

创新互联公司主营乐都网站建设的网络公司,主营网站建设方案,成都APP应用开发,乐都h5重庆小程序开发公司搭建,乐都网站营销推广欢迎乐都等地区企业咨询

   在这种方法中最重要的是级联数据的组织方式,我是这么设置的:

       用一个js多维数组来保存级联数据,一般来说,三级级联选择,需要一个二维数组,一个二级级联选择需要一个一维数组(就是普通数组),此处以三级级联选择为例。

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

此时,获取第一级select框的数据(既第一级节点数据)时可以只遍历data数组:

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

当第一级select框选中时,可以从对应的data[一级选中节点id] 中遍历生成第二级select框的数据

var selector = $("#第二级select框id");
$.each(data[一级选中节点的id],
    function(i,n)
    {
        //排除当前所在第一级节点名称
        if(i==0)continue;              
        selector.html('').append("");
    }
)

当第二级select框选中时,可以从对应的data[一级选中节点id][二级选中节点id] 中遍历生成第三级select框的数据

var selector = $("#第三级select框id");
$.each(data[一级选中节点的id][二级选中节点的id],
    function(i,n)
    {
        //排除当前所在第二级节点名称
        if(i==0)continue;             
        selector.html('').append("");
    }
)


具体实例可参考附件中地址级联选择功能,需要注意的是,附件中实例使用前,需设置省,市,县三个选择框的id到area_choose.js中






网站标题:多级数据级联选择,附省市县级联选择功能 ----- JQUERY特效模板
文章起源:http://cdkjz.cn/article/ggcpoh.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220