JS下拉筛选功能

2023-12-13 04:09:38

在这个示例中，我们将展示如何使用JavaScript和HTML创建一个下拉列表，根据用户选择的不同选项来筛选并显示相关的数据。

HTML部分：

<!DOCTYPE html>  
<html>  
<head>  
    <title>下拉筛选示例</title>  
</head>  
<body>  
    <select id="dropdown">  
        <option value="all">显示全部</option>  
        <option value="fruit">仅显示水果</option>  
        <option value="vegetable">仅显示蔬菜</option>  
    </select>  
    <ul id="items">  
        <li class="fruit">苹果</li>  
        <li class="vegetable">胡萝卜</li>  
        <li class="fruit">香蕉</li>  
        <li class="vegetable">菠菜</li>  
        <li class="fruit">橙子</li>  
        <!-- 更多项目... -->  
    </ul>  
</body>  
</html>

JavaScript部分：

window.onload = function() {  
    var dropdown = document.getElementById("dropdown");  
    var items = document.getElementById("items");  
    var allItems = items.getElementsByTagName("li");  
    for (var i = 0; i < allItems.length; i++) {  
        allItems[i].style.display = "none";  
    }  
    dropdown.onchange = function() {  
        var selectedValue = this.value;  
        for (var i = 0; i < allItems.length; i++) {  
            if (selectedValue == "all" || allItems[i].className == selectedValue) {  
                allItems[i].style.display = "block";  
            } else {  
                allItems[i].style.display = "none";  
            }  
        }  
    }  
}

在这个例子中，我们有一个下拉列表（select元素）和一个项目列表（ul元素）。每个项目（li元素）都有一个类别，可以是"fruit"或"vegetable"。当页面加载时，所有的项目默认都是隐藏的。然后，我们为下拉列表添加了一个onchange事件处理器。当用户从下拉列表中选择一个选项时，这个事件处理器会执行，根据用户选择的选项来显示或隐藏相关的项目。

文章来源:https://blog.csdn.net/geng1025/article/details/134899243
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。