JavaScript中下拉框默认选项重选时change事件不触发的问题求助

问题描述 #

用原生JavaScript实现动态表格过滤功能，通过下拉框筛选表格数据。每个下拉框包含值为空字符串的默认选项（显示"All [列名]"），但选中其他选项后重新选择默认选项时，change事件不触发，导致表格无法重置为原始未过滤状态。

下拉框HTML对比 #

选择前：

<th>
<select id="filter-findingStatus" class="filter-dropdown" data-columnname="findingStatus">
    <option value="">All findingStatus</option>
    <option value="in_progress">in_progress</option>
    <option value="false_positive">false_positive</option>
    <option value="closed">closed</option>
    <option value="ignored">ignored</option>
    <option value="new">new</option>
</select>
</th>

选择后：

<th>
    <select id="filter-findingStatus" class="filter-dropdown" data-columnname="findingStatus">
        <option value="">All findingStatus</option>
        <option value="ignored">ignored</option>
    </select>
</th>

相关JavaScript代码 #

构造函数中的事件监听 #

class Table {
constructor(tableId, headers) {
    this.tableId = tableId;
    this.headers = headers;
    this.uniqueValues = {};
    this.currentFilters = {};
    this.originalData = [];
    this.loadedData = [];
    this.currentlyLoadedCount = 0;
    this.loadIncrement = 20;

    console.info(`Table ID: ${this.tableId}`);
    const tableIdElement = document.getElementById(tableId);

    // 检查表格元素是否存在
    if (!tableIdElement) {
        console.error(`Table not found for tableId: ${tableId}`);
        return;
    }
    if (tableIdElement) {
        const scrollContainer = tableIdElement.closest('.table-scroll-container');
        if (scrollContainer) {
            scrollContainer.addEventListener('scroll', () => {
                if ((scrollContainer.offsetHeight + scrollContainer.scrollTop) >= scrollContainer.scrollHeight) {
                    this.loadMoreRows();
                }
            });
        } else {
            console.error(`Scroll container not found for table with id: ${this.tableId}`);
        }
    } else {
        console.error(`Table with id: ${this.tableId} not found`);
    }
    const dataBody = document.getElementById(this.tableId).querySelector('tbody');
    if (!dataBody) {
        console.error(`Table body not found for ID: ${this.tableId}`);
    }
    dataBody.innerHTML = '';
    // 获取所有筛选下拉框
    const filterDropdowns = document.querySelectorAll('.filter-dropdown');

    filterDropdowns.forEach(dropdown => {
        console.log(`Adding event listener to dropdown with column name: ${dropdown.dataset.columnname}`);
        dropdown.addEventListener('change', (event) => {
            console.log('Dropdown change event triggered', event);
            // 获取选中值
            const selectedValue = event.target.value;
            
            // 从data-columnName属性获取列名
            const columnName = dropdown.dataset.columnname;
            
            // 调用过滤方法
            this.filterTables(columnName, selectedValue);
        });
    });
}

filterTables方法 #

filterTables(columnName, selectedValue) {
    console.log(`Filtering tables for column: ${columnName}, selected value: ${selectedValue}`);
    
    // 如果选中默认值，移除该列的筛选条件
    if (selectedValue === '') {
        console.log(`Default (empty) value selected for column: ${columnName}. Removing filter for this column.`);
        delete this.currentFilters[columnName];
        // 重置loadedData为原始数据
        this.loadedData = [...this.originalData];
    } else {
        // 更新筛选条件
        console.log(`Non-default value selected for column: ${columnName}. Updating filter for this column.`);
        this.currentFilters[columnName] = selectedValue;
    }

    console.log(`Current filters:`, this.currentFilters);

    // 更新下拉框显示选中值
    const dropdown = document.querySelector(`.filter-dropdown[data-columnName="${columnName}"]`);
    if (dropdown) {
        dropdown.value = selectedValue;
    }

    // 对原始数据应用所有筛选条件
    this.loadedData = this.originalData.filter(item => {
        for (let column in this.currentFilters) {
            const cellValue = item[column] || '';
            const filterValue = this.currentFilters[column];
            if (filterValue !== '' && !cellValue.includes(filterValue)) {
                return false; // 不匹配则排除
            }
        }
        return true; // 匹配所有条件则保留
    });

    console.log(`Loaded data after applying filters:`, this.loadedData);

    // 清空表格
    const dataBody = document.getElementById(this.tableId).querySelector('tbody');
    dataBody.innerHTML = '';

    // 重置已加载行数
    this.currentlyLoadedCount = 0;

    // 加载第一批数据
    this.loadMoreRows();

    // 根据当前筛选后的数据更新下拉框选项
    this.storeAllUniqueFilterOptions(this.loadedData);
}

下拉框选项更新方法 #

storeAllUniqueFilterOptions(data) {
    // 重置唯一值对象
    this.uniqueValues = {};
    data.forEach(item => {
        this.headers.forEach(header => {
            const cellValue = item[header] || '';
            if (!this.uniqueValues[header]) {
                this.uniqueValues[header] = new Set();
            }
            this.uniqueValues[header].add(cellValue);
        });
    });
    this.populateFilterDropdowns();
}
populateFilterDropdowns() {
    for (const [key, valueSet] of Object.entries(this.uniqueValues)) {
        const dropdown = document.querySelector(`.filter-dropdown[data-columnName="${key}"]`);
        if (dropdown) {
            // 保存默认选项以便清空后重新添加
            const defaultOption = dropdown.querySelector('option[value=""]');
            // 清空旧选项
            dropdown.innerHTML = '';
            
            // 重新添加默认选项
            if (defaultOption) {
                dropdown.appendChild(defaultOption.cloneNode(true)); // 克隆默认选项节点
            }
            // 添加唯一值选项
            valueSet.forEach(value => {
                const option = document.createElement('option');
                option.value = value;
                option.textContent = value;
                dropdown.appendChild(option);
            });

            }
    }
}

已尝试操作 #

• 验证事件监听器已正确绑定到所有下拉框
• 控制台未发现JavaScript错误
• 尝试手动触发默认选项选中事件，未达到预期效果

解决建议 #

问题根源：每次筛选后调用populateFilterDropdowns重新生成下拉选项时，默认选项是克隆旧节点，且下拉框的选中状态与新生成的默认选项值一致，导致再次选择默认选项时没有值变化，change事件不触发。

修复方案1：同步下拉框选中状态与筛选条件 #

在populateFilterDropdowns方法的循环内，处理完下拉选项后，手动设置下拉框的选中值（与currentFilters同步）：

// 在populateFilterDropdowns的for循环内，添加完所有选项后插入：
dropdown.value = this.currentFilters[key] || '';

这样确保下拉框的选中状态始终与当前筛选条件一致，下次选择默认选项时，只要当前选中值不是空，就会触发change事件。

修复方案2：直接创建新的默认选项 #

避免克隆旧节点导致的状态残留，直接生成新的默认选项：

// 替换populateFilterDropdowns中默认选项的处理逻辑：
// 移除原有的defaultOption克隆代码，改为：
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = `All ${key}`; // 可根据需求调整文本
dropdown.appendChild(defaultOption);

修复方案3：移除冗余的选中值设置 #

filterTables中的dropdown.value = selectedValue;会被后续populateFilterDropdowns覆盖，可直接删除该行，统一在populateFilterDropdowns中同步选中状态。

内容的提问来源于stack exchange，提问作者Mikeshift