jQuery收集select选中值存入数组仅获取首个值的问题

代码无法获取全量下拉框值的核心原因有两个：

• jQuery的.data()方法匹配到多个DOM元素时，只会返回集合中第一个元素的对应属性值，不会自动遍历返回所有匹配元素的值，这是你始终只能拿到第一个下拉框选中值的直接原因
• 全局声明的calculation数组没有在每次选项变更时重置，使用push追加值会导致旧值不断堆积，后续求和时结果会出现偏差

原有HTML结构不需要调整，替换jQuery逻辑即可：

jQuery("#questions").on("change", "select", function() {
    // 每次选项变更先重置数组，避免历史值残留
    const calculation = [];
    // 遍历所有下拉框，逐个采集当前选中项的calculate属性值
    jQuery("#questions select").each(function() {
        const itemValue = jQuery(this).find(":selected").data("calculate");
        // 统一转为数字类型存储，方便后续直接求和计算
        calculation.push(Number(itemValue));
    });
    // 调试逻辑：拼接数组值写入隐藏域
    jQuery("#calculator").val(calculation.join(', '));

    // 后续需要求和时直接启用这段代码即可
    // const totalScore = calculation.reduce((sum, current) => sum + current, 0);
});

• 事件直接绑定到表单内的所有下拉框元素，避免事件冒泡带来的元素匹配异常
• 数组放在事件回调内声明，每次触发都重新初始化，从根源避免旧值重复累加的问题
• 采集值时统一转为数字类型，后续做求和运算不需要额外做类型转换，不会出现字符串拼接的错误
• 调试阶段可以直接打印calculation数组确认值采集正确，再接入求和逻辑即可

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