多级数据级联选择,附省市县级联选择功能   -----   JQUERY特效模板
更新:HHH   时间:2023-1-7


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


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

       用一个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("<option value='"+i+"' selected>"+n[0]+"</option>");
    }
)


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

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



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

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



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












返回web开发教程...