WordPress中用JavaScript同步下拉框内容至多ID span的问题

核心问题 #

你的代码存在三个关键问题：

1. 重复定义函数：每个搜索结果里都重复写了update函数，后面的函数会覆盖前面的，导致最终只有最后一个update生效，但它只处理对应的单个span，所以之前要么只有第一个结果显示，要么改ID后完全不生效。
2. ID使用不合理：虽然HTML5允许数字开头的ID，但用唯一ID逐个操作效率低且容易出问题，批量操作更适合用class。
3. 未监听下拉框变化：原代码只在页面加载时执行一次更新，用户后续切换下拉选项时，不会自动同步更新所有结果的显示内容。

修改后的代码 #

搜索结果循环中的PHP/HTML部分

把每个span的唯一ID换成统一的class：

<div class="listing-cat">
    <i class="<?php echo $cat_icon; ?>"></i>
    <span class="category-display"></span>
</div>

全局JavaScript（放在页面底部</body>标签前）

只写一次脚本，统一处理所有更新逻辑：

document.addEventListener('DOMContentLoaded', function() {
    const selectEl = document.getElementById('list-category');

    // 定义批量更新函数
    function updateCategoryDisplays() {
        const selectedText = selectEl.options[selectEl.selectedIndex].text;
        // 获取所有需要更新的span元素
        const displaySpans = document.querySelectorAll('.category-display');
        // 遍历设置文本内容
        displaySpans.forEach(span => {
            span.textContent = selectedText;
        });
    }

    // 页面加载完成后先执行一次，初始化显示
    updateCategoryDisplays();
    // 监听下拉框的change事件，选项变化时自动更新
    selectEl.addEventListener('change', updateCategoryDisplays);
});

为什么这样改？ #

• 用class替代唯一ID，通过querySelectorAll可以一次性获取所有需要更新的元素，批量操作更高效。
• 只定义一次updateCategoryDisplays函数，避免函数覆盖问题。
• 监听下拉框的change事件，用户切换选项时所有结果的显示内容会自动同步更新，同时页面加载时也会初始化显示选中的内容。

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