如何检测所有<select>元素均已选中？现有方案存问题求优化

问题出在全局计数的逻辑错误——它统计的是选择操作的次数，而非三个下拉框是否均已选择有效选项。正确的做法是每次触发onchange时，直接检查三个下拉框的当前值是否都不为默认状态（即用户已选择了具体的日期/月份/年份）。

修改后的代码： #

HTML（保持不变）：

<select id="day" name="day" onchange="report()">
    <option disabled selected>Day</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<select id="month" name="month" onchange="report()">
    <option disabled selected>Month</option>
    <option value="1">January</option>
    <option value="2">February</option>
</select>
<select id="year" name="year" onchange="report()">
    <option disabled selected>Year</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
</select>

JavaScript：

function report() {
    // 获取三个下拉框的当前值
    const dayValue = document.getElementById('day').value;
    const monthValue = document.getElementById('month').value;
    const yearValue = document.getElementById('year').value;

    // 检查三个值是否都不为空（默认选项无有效value，选中时value为空字符串）
    if (dayValue && monthValue && yearValue) {
        alert('All three are selected');
    }
}

逻辑说明： #

• 每次用户修改任意下拉框选项时，都会实时获取三个下拉框的当前值
• 只有当三个值都不为空（即用户均选择了具体选项，而非停留在默认提示项）时，才触发alert提示
• 这种方式不受用户修改已选选项的影响，比如用户先选day和month再修改month的值，此时year未选择，不会触发提示，只有三者均选好后才会触发

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