多级数据级联选择，附省市县级联选择功能 ----- JQUERY特效模板-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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

新闻中心

其他资讯