好的，这是一个基于 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 数组中的分类数据。希望这个代码对你有所帮助。
最低0.47元/天 解锁文章
736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
