Implementing tree drop-down box based on JavaScript

Preface

As a common form element, the tree drop-down box is also very common in Web development. In most cases, we often initialize the options of the drop-down box statically, and then dynamically modify the options of the drop-down box through JavaScript. However, under some special needs, the static drop-down box can no longer meet the requirements, and we may need to dynamically generate a tree-shaped drop-down box. So, how to implement a tree drop-down box using JavaScript? The following is the main content of this article.

1. Implementation ideas

Before implementing the tree drop-down box, we need to understand the basic concept of the tree structure. In a tree structure, a node can contain any number of child nodes. Therefore, our tree drop-down box needs to support this nested structure. Generally speaking, implementing a tree drop-down box can be divided into the following steps:

1. Data source initialization: Construct an array to store the options of the drop-down box;
2. Data source traversal: Traverse Data source, insert the node into the specified position, and update the indentation level of the node at the same time;
3. Drop-down box generation: convert the data source into HTML elements, and then insert them into the drop-down box.

2. Code Implementation

A simple implementation process is given below to understand how to implement a tree drop-down box.

1. Data source initialization

Here, we define a data source to record the hierarchical relationship of the tree structure:

var treeData = [
    { id: 1, name: 'Node 1' },
    { id: 2, name: 'Node 2', parentId: 1 },
    { id: 3, name: 'Node 3', parentId: 1 },
    { id: 4, name: 'Node 4', parentId: 2 },
    { id: 5, name: 'Node 5', parentId: 2 },
    { id: 6, name: 'Node 6', parentId: 3 },
    { id: 7, name: 'Node 7', parentId: 3 },
    { id: 8, name: 'Node 8', parentId: 4 },
    { id: 9, name: 'Node 9', parentId: 4 },
    { id: 10, name: 'Node 10', parentId: 5 },
    { id: 11, name: 'Node 11', parentId: 5 },
    { id: 12, name: 'Node 12', parentId: 6 },
    { id: 13, name: 'Node 13', parentId: 6 },
    { id: 14, name: 'Node 14', parentId: 7 },
    { id: 15, name: 'Node 15', parentId: 7 },
];

Among them, id Used to identify the node, name is the name of the node, parentId is the node's parent node id.

2. Data source traversal

Traverse the data source, insert the node into the specified position, and update the indentation level of the node. The following is a simple implementation process:

function buildTree(data) {
    var tree = [], children = {};

    for (var i = 0; i < data.length; i++) {
        var item = data[i], id = item.id, parentId = item.parentId || 0;

        if (!children[parentId]) {
            children[parentId] = [];
        }

        children[parentId].push(item);
    }

    function build(node, level) {
        node.level = level;
        tree.push(node);

        if (children[node.id]) {
            for (var i = 0; i < children[node.id].length; i++) {
                build(children[node.id][i], level + 1);
            }
        }
    }

    if (children[0]) {
        for (var i = 0; i < children[0].length; i++) {
            build(children[0][i], 0);
        }
    }

    return tree;
}

var tree = buildTree(treeData);

Here, we use an object to save the child nodes of each node, and then perform recursive traversal to calculate the level of each node. After the recursion ends, we get an array composed of nodes, each node contains id, name, parentId and level.

3. Drop-down box generation

Convert the data source into HTML elements and then insert them into the drop-down box. A simple implementation process is given below:

function buildTreeSelect(data, select) {
    select.innerHTML = '';

    for (var i = 0; i < data.length; i++) {
        var option = document.createElement('option');
        option.value = data[i].id;
        option.innerHTML = ' '.repeat(data[i].level * 4) + data[i].name;
        select.appendChild(option);
    }
}

var select = document.getElementById('tree-select');
buildTreeSelect(tree, select);

Here, we generate an option element and set its value and innerHTML attributes, where innerHTML contains the hierarchical information of the node. Then insert the option element into the select element.

3. Conclusion

So far, we have implemented a simple tree drop-down box using JavaScript. In fact, in actual development, we still need to consider more details, such as how to handle the status of nodes, how to implement node search, how to implement asynchronous loading of nodes, etc. However, through this article, we can learn how to use JavaScript to implement a basic tree drop-down box. Hope it helps.

The above is the detailed content of Implementing tree drop-down box based on JavaScript. For more information, please follow other related articles on the PHP Chinese website!