在这个示例中，我们将展示如何使用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事件处理器。当用户从下拉列表中选择一个选项时，这个事件处理器会执行，根据用户选择的选项来显示或隐藏相关的项目。
