实现方式：JSON+JS
JSON用例为：
北京
├┈延庆
├┈营口村
├┈测试
├┈营口村2
├┈密云
天津
├┈天一村
├┈天二村
河北
organization = {
"name": "项目名称",
"projectId": 1,
"children": [
{
"name": "北京",
"children": [
{
"name": "延庆",
"children": [
{
"name": "营口村",
"children": [
{
"name": "测试"
}
]
},
{
"name": "营口村2",
}
]
},
{
"name": "密云",
}
]
},
{
"name": "天津",
"children": [
{
"name": "天一村"
},
{
"name": "天二村"
}
]
},
{
"name": "河北",
}
]
}
效果图：
每次选择都会打印出来当前的选择项索引
完整代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>关联选择-可以无限拓展</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<script type="text/javascript">
const organization = {
"name": "项目名称",
"projectId": 1,
"children": [
{
"name": "北京",
"children": [
{
"name": "延庆",
"children": [
{
"name": "营口村",
"children": [
{
"name": "测试"
}
]
},
{
"name": "营口村2",
}
]
},
{
"name": "密云",
}
]
},
{
"name": "天津",
"children": [
{
"name": "天一村"
},
{
"name": "天二村"
}
]
},
{
"name": "河北",
}
]
}
function getChild(id, e, data) {
//id, 当前select ID
//e, 当前select选择项的索引
//data, 当前节点的json数据
let selectedItem = id.replace('organization', '') + '_' + e;
selectedItem = selectedItem.split('_').join(',');
if (selectedItem.substr(0, 1) == ',') {
selectedItem = selectedItem.substr(1);
}
console.log(selectedItem);
let selectArr = document.getElementById('selectOrg').getElementsByTagName('select');
let level = id.split('_').length;
for (let j = selectArr.length - 1; j > level - 1; j--) {
document.getElementById('selectOrg').removeChild(selectArr[j]);
}
if (e != "-1") {
if (data.children && data.children.length > 0) {
let temp = data.children;
let childItem = document.createElement('select');
childItem.id = id + '_' + e;
childItem.className = 'cbi-input-select';
if (window.addEventListener) {
childItem.addEventListener('change', function () { getChild(this.id, this.value, data.children[this.value]) }, false);
} else {
childItem.attachEvent('onchange', function () { getChild(this.id, this.value, data.children[this.value]) });
};
childItem.innerHTML = '<option value="-1">-- Please Select --</option>';
for (let i = 0; i < temp.length; i++) {
childItem.innerHTML += '<option value="' + i + '">' + temp[i].name + '</option>';
}
document.getElementById('selectOrg').appendChild(childItem);
} else {
for (let j = selectArr.length - 1; j > level - 1; j--) {
document.getElementById('selectOrg').removeChild(selectArr[j]);
}
}
}
}
</script>
<style type="text/css">
#selectOrg select {
margin-bottom: 0.7rem;
}
</style>
</head>
<body>
<script type="text/javascript">
let options = '';
let level = organization.children;
for (let i = 0; i < level.length; i++) {
options += '<option value="' + i + '">' + level[i]["name"] + '</option>';
}
let initSection = `
<div id="selectOrg">
<select id="organization" type="text" class="cbi-input-select" value="" onchange="getChild(this.id,this.value,organization.children[this.value])">
<option value="-1">-- Please Select --</option>
${options}
</select>
</div>
`;
document.write(initSection);
</script>
</body>
</html>
