一、樹形結構介紹
在數據結構中，樹是一種非常常見的數據結構。樹是由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>
原創文章，作者：JHCZV，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/369356.html
微信掃一掃 
支付寶掃一掃 