JS下拉筛选功能

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

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