用JavaScript编写树形下拉框实现多级选择

一、树形结构介绍

在数据结构中,树是一种非常常见的数据结构。树是由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/n/369356.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JHCZVJHCZV
上一篇 2025-04-12 13:01
下一篇 2025-04-12 13:01

相关推荐

  • 使用JavaScript日期函数掌握时间

    在本文中,我们将深入探讨JavaScript日期函数,并且从多个视角介绍其应用方法和重要性。 一、日期的基本表示与获取 在JavaScript中,使用Date对象来表示日期和时间,…

    编程 2025-04-28
  • JavaScript中使用new Date转换为YYYYMMDD格式

    在JavaScript中,我们通常会使用Date对象来表示日期和时间。当我们需要在网站上显示日期时,很多情况下需要将Date对象转换成YYYYMMDD格式的字符串。下面我们来详细了…

    编程 2025-04-27
  • 使用Thymeleaf动态渲染下拉框

    本文将从下面几个方面,详细阐述如何使用Thymeleaf动态渲染下拉框: 一、Thymeleaf是什么 Thymeleaf是一款Java模板引擎,可用于Web和非Web环境中的应用…

    编程 2025-04-27
  • JavaScript中修改style属性的方法和技巧

    一、基本概念和方法 style属性是JavaScript中一个非常重要的属性,它可以用来控制HTML元素的样式,包括颜色、大小、字体等等。这里介绍一些常用的方法: 1、通过Java…

    编程 2025-04-25
  • CloneDeep函数在Javascript开发中的应用

    一、CloneDeep的概念 CloneDeep函数在Javascript中是一种深层克隆对象的方法,可以在拷贝对象时避免出现引用关系。使用者可以在函数中设置可选参数使其满足多种拷…

    编程 2025-04-25
  • JavaScript中的Object.getOwnPropertyDescriptors()

    一、简介 Object.getOwnPropertyDescriptors()是JavaScript中一个非常有用的工具。简单来说,这个方法可以获取一个对象上所有自有属性的属性描述…

    编程 2025-04-25
  • JavaScript保留整数的完整指南

    JavaScript是一种通用脚本语言,非常适合Web应用程序开发。在处理数字时,JavaScript可以处理整数和浮点数。在本文中,我们将重点关注JavaScript如何保留整数…

    编程 2025-04-25
  • JavaScript点击事件全方位指南

    一、click事件基础 click事件是最常用的鼠标事件之一,当元素被单击时触发。click事件适用于大多数HTML元素(<a>、<button>)和SVG…

    编程 2025-04-25
  • 详解JavaScript onclick事件

    一、onclick的基础知识 onclick事件是JavaScript中最常用的事件之一,它在用户点击某个HTML元素时触发。通常我们可以通过给元素添加一个onclick属性来绑定…

    编程 2025-04-25
  • JavaScript浅拷贝

    一、什么是浅拷贝 在JavaScript中,浅拷贝是一种将源对象的属性复制到目标对象中的方法。浅拷贝的实现方式有多种,包括直接赋值、Object.assign()、展开运算符、co…

    编程 2025-04-25

发表回复

登录后才能评论