如何用JavaScript处理PHP循环生成的下拉选框数据并统计重复次数

原代码核心问题 #

• 仅获取result当前选中值而非遍历所有选项，无法实现批量显示/隐藏逻辑
• 所有result选项使用同一id="ocultar"，违反HTML id唯一规则
• 缺少重复次数统计逻辑
• PHP生成result选项时，两次调用rand(1,5)会导致选项值与显示文本不一致

修正后的完整代码 #

<html>
<head>
    <script>
        function setorSelected() {
            const selectedSetor = document.getElementById("setor").value;
            const resultSelect = document.getElementById("result");
            const options = resultSelect.querySelectorAll("option");
            let count = 0;

            // 显示RESULTADO容器
            document.getElementById("mostrar").style.display = "block";

            // 遍历所有选项，控制显示并统计数量
            options.forEach(option => {
                // 保留默认空选项
                if (option.value === "") {
                    option.style.display = "inline";
                    return;
                }
                if (option.value === selectedSetor) {
                    option.style.display = "inline";
                    count++;
                } else {
                    option.style.display = "none";
                }
            });

            // 重置选中状态为默认选项
            resultSelect.selectedIndex = 0;

            // 更新统计结果
            document.getElementById("count").textContent = `选中值的重复次数：${count}`;
        }
    </script>
</head>
<body>
    <div>
        <label class="col-sm-12 col-form-label">SETOR</label>
        <select onchange="setorSelected()" name="rand" id="setor" class="form-select" aria-label="Selecione" required>
            <option value="">Selecione..</option>
            <?php
                $total = 5;
                for($i=0;$i<=$total;$i++){
            ?>
                <option value="<?php echo $i;?>">
                    <?php echo $i;?> 
                </option>
            <?php } ?>
        </select>
    </div>
    <p></p>
        
    <div style="display:none" id="mostrar">
        <label class="col-sm-12 col-form-label">RESULTADO</label>
        <select name="rand" id="result" class="form-select" aria-label="Selecione" required>
            <option value="">Selecione..</option>
            <?php
                $total = 20;
                for($i=0;$i<=$total;$i++){
                    // 仅生成一次随机数，确保值与文本一致
                    $randValue = rand(1,5);
            ?>
                <option value="<?php echo $randValue;?>">
                    <?php echo $randValue;?>  
                </option>
            <?php } ?>
        </select>
        <!-- 统计结果展示区域 -->
        <p id="count"></p>
    </div>
</body>
</html>

关键逻辑说明 #

1. 选项遍历控制：通过querySelectorAll("option")获取所有选项，逐个匹配SETOR选中值，控制display属性实现显示/隐藏
2. 重复次数统计：遍历过程中对匹配选项计数，最终更新到页面展示
3. PHP代码修正：将随机数生成改为先赋值给变量，确保选项的value与显示文本完全一致
4. 选中状态重置：每次筛选后将result选中状态重置为默认选项，避免出现选中隐藏选项的异常

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