其实,这个功能网上也有很多功能模板,很多种方法都可以实现,都各有利弊,在此不对此做过多评价,这里只是提供另一种思路,也是我常用的一个办法,便于扩展,可适用于数据量不是很大(总数据可以支持到上万,前提是每个数据不会很长,基本上可以覆盖大多数的级联选择应用)的多级级联选择。
创新互联公司主营乐都网站建设的网络公司,主营网站建设方案,成都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中