PHP MySQL下拉选中项及对应数量点击无显示问题求助

我来帮你一步步找出问题根源并修复：

问题1：SQL查询未统计学生数量 #

你当前的SQL只查询了去重的student_prg，但没有统计每个program对应的学生数量，导致$row['count']根本不存在，下拉选项的data-count属性是空值。

修复SQL：
修改查询语句，用GROUP BY分组并统计数量：

$sql = "SELECT student_prg, COUNT(*) AS count FROM marketing_data GROUP BY student_prg";

同时，下拉选项的value字段你用了$row['student_matric']，但当前SQL里并没有查询这个字段，会导致报错，改成和显示文本一致的student_prg更合理：

echo '<option value="'.$row['student_prg'].'" data-count="'.$row['count'].'">'.$row['student_prg'].'</option>';

问题2：JavaScript变量作用域错误 #

你在jQuery的change事件里定义了selectedprg和selectedcount，但这两个是局部变量，外部的myFunction()根本访问不到，所以点击按钮时这两个变量都是未定义状态。

修复方案（更简洁的写法，无需依赖全局变量）：
直接在myFunction()里获取当前选中的下拉选项数据，不用提前存变量，这样不管什么时候点击按钮，都能拿到最新的选中值：

function myFunction() {
    // 获取下拉选框元素
    const prgSelect = document.getElementById("prg");
    // 获取当前选中的选项
    const selectedOption = prgSelect.options[prgSelect.selectedIndex];
    
    // 提取program名称和统计数量
    const selectedprg = selectedOption.text;
    const selectedcount = selectedOption.dataset.count;
    
    // 增加判断：如果没选中有效选项，提示用户
    if (selectedprg === "Select Programme" || !selectedcount) {
        document.getElementById("demo").innerHTML = "Please select a valid programme first.";
        return;
    }
    
    // 渲染结果
    document.getElementById("demo").innerHTML = "The next intake for " + selectedprg + " will have " + selectedcount + " students";
}

这样修改后，你之前的那段jQuery代码可以直接删掉，因为已经不需要在change事件里存变量了。

最终完整代码示例 #

下拉选择部分 #

<select id="prg" name="prg" class="demoInputBox" style="padding: 3px; width: 350px;">
    <option value="">Select Programme</option>
    <?php
    $sql = "SELECT student_prg, COUNT(*) AS count FROM marketing_data GROUP BY student_prg";
    $do = mysqli_query($conn, $sql);
    while($row = mysqli_fetch_array($do)){
        echo '<option value="'.$row['student_prg'].'" data-count="'.$row['count'].'">'.$row['student_prg'].'</option>';
    }
    ?>
</select>

按钮和脚本部分 #

<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

<script>
function myFunction() {
    const prgSelect = document.getElementById("prg");
    const selectedOption = prgSelect.options[prgSelect.selectedIndex];
    
    const selectedprg = selectedOption.text;
    const selectedcount = selectedOption.dataset.count;
    
    if (selectedprg === "Select Programme" || !selectedcount) {
        document.getElementById("demo").innerHTML = "Please select a valid programme first.";
        return;
    }
    
    document.getElementById("demo").innerHTML = "The next intake for " + selectedprg + " will have " + selectedcount + " students";
}
</script>

这样修改后，选择program并点击按钮，就能正常显示对应的统计数量了。

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