Razor Pages项目下拉框按端口过滤tr功能失效如何解决？

开发者阿泽

2026-9-28

问题排查

你的端口过滤逻辑存在以下几处核心错误：

jQuery选择器语法不符合规范，:not()伪类内的写法完全错误，无法正确筛选出id等于选中值的tr元素
只有隐藏逻辑没有重置显示的逻辑，每次切换下拉选项时，之前被隐藏的行不会重新显示，后续过滤会直接失效
两个过滤逻辑互相独立没有关联，修改其中一个条件会直接覆盖另一个的过滤结果
如果端口值为纯数字开头，直接用#id选择器存在兼容性问题，用属性选择器更稳妥

修复方案

建议把两个过滤逻辑合并，统一触发避免冲突，优化后的完整代码如下：

$(document).ready(function () {
    // 统一过滤函数，同时处理两个过滤条件
    function filterTable() {
        const selectedPort = $('#portdd').val();
        const searchStr = $('#searchb').val().trim();
        // 先重置所有数据行的显示状态
        $('tr:gt(0)').show();
        
        // 应用端口过滤
        if (selectedPort) {
            $('tr:gt(0):not([id="' + selectedPort + '"])').hide();
        }
        
        // 在端口过滤结果的基础上应用名称过滤
        if (searchStr) {
            $('tr:gt(0):visible:not(:contains("' + searchStr + '"))').hide();
        }
    }

    // 绑定事件，搜索框支持实时输入响应，不用等待失焦
    $('#portdd').change(filterTable);
    $('#searchb').on('input change', filterTable);
});