网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

多级数据级联选择,附省市县级联选择功能 ----- 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://bjjierui.cn/article/ggcpoh.html

其他资讯