html+js 实现树形级联选择框代码
时间: 2023-11-16 14:07:04 浏览: 36
好的,这是一个基于 HTML、JavaScript 和 jQuery 的树形级联选择框代码:
HTML 代码:
```
<div id="tree">
<select id="level1">
<option value="">请选择一级分类</option>
<option value="1">分类1</option>
<option value="2">分类2</option>
<option value="3">分类3</option>
</select>
<select id="level2">
<option value="">请选择二级分类</option>
</select>
<select id="level3">
<option value="">请选择三级分类</option>
</select>
</div>
```
JS 代码:
```
$(function() {
var treeData = [
{
"id": "1",
"text": "分类1",
"children": [
{
"id": "1-1",
"text": "分类1-1",
"children": [
{
"id": "1-1-1",
"text": "分类1-1-1"
},
{
"id": "1-1-2",
"text": "分类1-1-2"
}
]
},
{
"id": "1-2",
"text": "分类1-2",
"children": [
{
"id": "1-2-1",
"text": "分类1-2-1"
},
{
"id": "1-2-2",
"text": "分类1-2-2"
}
]
}
]
},
{
"id": "2",
"text": "分类2",
"children": [
{
"id": "2-1",
"text": "分类2-1",
"children": [
{
"id": "2-1-1",
"text": "分类2-1-1"
},
{
"id": "2-1-2",
"text": "分类2-1-2"
}
]
},
{
"id": "2-2",
"text": "分类2-2",
"children": [
{
"id": "2-2-1",
"text": "分类2-2-1"
},
{
"id": "2-2-2",
"text": "分类2-2-2"
}
]
}
]
},
{
"id": "3",
"text": "分类3",
"children": [
{
"id": "3-1",
"text": "分类3-1",
"children": [
{
"id": "3-1-1",
"text": "分类3-1-1"
},
{
"id": "3-1-2",
"text": "分类3-1-2"
}
]
},
{
"id": "3-2",
"text": "分类3-2",
"children": [
{
"id": "3-2-1",
"text": "分类3-2-1"
},
{
"id": "3-2-2",
"text": "分类3-2-2"
}
]
}
]
}
];
var $level1 = $('#level1'),
$level2 = $('#level2'),
$level3 = $('#level3');
// 初始化一级分类
for (var i = 0; i < treeData.length; i++) {
$level1.append('<option value="' + treeData[i].id + '">' + treeData[i].text + '</option>');
}
// 当一级分类选中时,动态创建二级分类
$level1.on('change', function() {
var val = $(this).val();
$level2.empty().append('<option value="">请选择二级分类</option>');
for (var i = 0; i < treeData.length; i++) {
if (treeData[i].id === val) {
var children = treeData[i].children;
if (children && children.length > 0) {
for (var j = 0; j < children.length; j++) {
$level2.append('<option value="' + children[j].id + '">' + children[j].text + '</option>');
}
}
}
}
$level2.trigger('change');
});
// 当二级分类选中时,动态创建三级分类
$level2.on('change', function() {
var val = $(this).val();
$level3.empty().append('<option value="">请选择三级分类</option>');
for (var i = 0; i < treeData.length; i++) {
var children = treeData[i].children;
if (children && children.length > 0) {
for (var j = 0; j < children.length; j++) {
if (children[j].id === val) {
var grandchildren = children[j].children;
if (grandchildren && grandchildren.length > 0) {
for (var k = 0; k < grandchildren.length; k++) {
$level3.append('<option value="' + grandchildren[k].id + '">' + grandchildren[k].text + '</option>');
}
}
}
}
}
}
});
});
```
这段代码实现了一个三级树形级联选择框,当一级分类选中时,动态加载二级分类;当二级分类选中时,动态加载三级分类。根据你的实际需求,你可以修改 treeData 数组中的分类数据。希望这个代码对你有所帮助。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)