js下拉菜单筛选数据

在JavaScript中实现下拉菜单筛选数据的功能，通常涉及到以下几个基础概念：

基础概念

DOM操作：Document Object Model，用于操作HTML文档的结构。
事件监听：监听用户的交互行为，如点击、选择等。
数组过滤：根据条件筛选数组中的元素。

实现步骤

HTML结构：创建一个下拉菜单和一个用于显示筛选结果的容器。
JavaScript逻辑：编写脚本来处理下拉菜单的选择事件，并根据选择的内容筛选数据。

示例代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>筛选数据示例</title>
</head>
<body>
    <select id="filterSelect">
        <option value="all">全部</option>
        <option value="fruit">水果</option>
        <option value="vegetable">蔬菜</option>
    </select>
    <ul id="resultList">
        <!-- 筛选结果将显示在这里 -->
    </ul>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

// 假设我们有以下数据
const data = [
    { name: '苹果', type: 'fruit' },
    { name: '香蕉', type: 'fruit' },
    { name: '胡萝卜', type: 'vegetable' },
    { name: '西红柿', type: 'vegetable' },
    { name: '橙子', type: 'fruit' }
];

// 获取DOM元素
const filterSelect = document.getElementById('filterSelect');
const resultList = document.getElementById('resultList');

// 初始化显示所有数据
function displayData(items) {
    resultList.innerHTML = '';
    items.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item.name;
        resultList.appendChild(li);
    });
}

// 初始显示所有数据
displayData(data);

// 添加事件监听
filterSelect.addEventListener('change', function() {
    const selectedValue = this.value;
    if (selectedValue === 'all') {
        displayData(data);
    } else {
        const filteredData = data.filter(item => item.type === selectedValue);
        displayData(filteredData);
    }
});