一、树形结构介绍
在数据结构中，树是一种非常常见的数据结构。树是由n（n>=1）个有限节点组成一个具有层次关系的集合。为了便于理解，我们可以将树形结构类比为公司的组织架构或家谱结构。继承关系是一种树形结构，在数据呈现上也是如此。
这里我们提到树形结构，只是用来说明JavaScript如何处理树形下拉框的逻辑关系。这样的数据结构可以使用嵌套的select元素来实现数据的层次关系。
二、实现原理
对于树形下拉框的实现，最常用的方法是通过递归来构建多个select元素。核心代码如下：
//树形下拉框递归函数
function buildOption(dom, data){
if(Object.prototype.toString.call(data) === '[object Array]' && data.length > 0){
for(var i = 0; i < data.length; i++){
var option = document.createElement('option');
option.value = data[i].value;
option.innerHTML = data[i].name;
dom.appendChild(option);
if(data[i].children && data[i].children.length > 0){
buildOption(option, data[i].children);
}
}
}
}
当我们调用buildOption方法时，它会对传入的数据进行遍历，并根据数据中层次关系的不同，建立多个select元素。
三、代码示例
下面是一个完整的实例，其中我们使用了一个名为"data"的数组来存储树形结构的数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>树形下拉框示例</title>
</head>
<body>
<select id="level1"></select>
<select id="level2"></select>
<select id="level3"></select>
<script type="text/javascript">
//树形下拉框递归函数
function buildOption(dom, data){
if(Object.prototype.toString.call(data) === '[object Array]' && data.length > 0){
for(var i = 0; i < data.length; i++){
var option = document.createElement('option');
option.value = data[i].value;
option.innerHTML = data[i].name;
dom.appendChild(option);
if(data[i].children && data[i].children.length > 0){
buildOption(option, data[i].children);
}
}
}
}
//数据
var data = [
{
"value": "level1_1",
"name": "第一级1",
"children": [
{
"value": "level2_1",
"name": "第二级1",
"children": [
{
"value": "level3_1",
"name": "第三级1"
},
{
"value": "level3_2",
"name": "第三级2"
}
]
},
{
"value": "level2_2",
"name": "第二级2",
"children": [
{
"value": "level3_3",
"name": "第三级3"
},
{
"value": "level3_4",
"name": "第三级4"
}
]
}
]
},
{
"value": "level1_2",
"name": "第一级2",
"children": [
{
"value": "level2_3",
"name": "第二级3",
"children": [
{
"value": "level3_5",
"name": "第三级5"
},
{
"value": "level3_6",
"name": "第三级6"
}
]
},
{
"value": "level2_4",
"name": "第二级4",
"children": [
{
"value": "level3_7",
"name": "第三级7"
},
{
"value": "level3_8",
"name": "第三级8"
}
]
}
]
}
];
//建立三个select元素
buildOption(document.getElementById('level1'), data);
//第一级改变时，动态生成第二级
document.getElementById('level1').addEventListener('change', function(){
var value = this.value;
var level2Data = null;
for(var i = 0; i < data.length; i++){
if(data[i].value === value){
level2Data = data[i].children;
break;
}
}
document.getElementById('level2').innerHTML = '';
buildOption(document.getElementById('level2'), level2Data);
document.getElementById('level3').innerHTML = '';
});
//第二级改变时，动态生成第三级
document.getElementById('level2').addEventListener('change', function(){
var value = this.value;
var level3Data = null;
for(var i = 0; i < data.length; i++){
var level2s = data[i].children;
for(var j = 0; j < level2s.length; j++){
if(level2s[j].value === value){
level3Data = level2s[j].children;
break;
}
}
}
document.getElementById('level3').innerHTML = '';
buildOption(document.getElementById('level3'), level3Data);
});
</script>
</body>
</html>
