如何通过下拉框按条件筛选HTML元素？（复杂场景版）

算力阿峰

2026-7-30

解决方案

你的代码有两个关键问题：

PHP代码仅执行一次：页面加载时PHP就固定了$data['county']和$data['id']的值，只能处理单个商家，无法覆盖所有动态生成的div。
下拉框元素选择错误：监听的是#dropdowncounty的change事件，但取值时用了document.getElementById("dropdown")，如果下拉框实际id是dropdowncounty，会导致获取不到正确选中值。

修改步骤：

给商家div添加地点数据属性
动态生成商家div时，添加data-county属性存储地点信息：

<div id="<?php echo $data['id']??''; ?>" data-county="<?php echo $data['county']??''; ?>">
    <!-- 商家展示内容 -->
</div>

重写JavaScript筛选逻辑
不再依赖PHP输出选择器，直接通过data-county遍历所有商家div，根据选中值控制显示：

$('#dropdowncounty').on('change', function(){
    // 获取当前下拉框选中值
    var selectedCounty = $(this).val();
    
    // 遍历所有带地点标识的商家div
    $('div[data-county]').each(function(){
        var currentCounty = $(this).data('county');
        // 选中值为空（比如"全部"选项）或地点匹配则显示，否则隐藏
        if (selectedCounty === '' || currentCounty === selectedCounty) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});