如何在Console Log中关联显示选中下拉项与对应数量值？

我来帮你搞定这个关联输出和重复选项统计的问题！你的核心痛点是没法把同一行的数量输入框和下拉选项对应起来，同时还要合并重复选项的数量，下面是具体的实现方案：

问题分析 #

你之前的代码是分别遍历所有下拉框和输入框，自然没法匹配到同一行的元素。实际上每一组下拉框和输入框都被包裹在.field-group容器里，我们只需要先遍历每个容器，再在容器内部获取对应的选项和数量，就能完美关联；同时用一个对象来累加每个选项的总数量，轻松实现重复统计。

完整代码实现 #

// 绑定保存按钮的点击事件
$("#btnSavePackagetab2").click(function() {
    // 创建一个对象，用于存储每个选项的累计数量
    const itemCounter = {};

    // 遍历每一组.field-group容器
    $(".field-group").each(function() {
        // 获取当前组的下拉选中文本
        const selectedItem = $(this).find(".ex option:selected").text();
        // 获取当前组的数量值，转为数字（空值或非数字默认0）
        const qty = parseInt($(this).find(".span2").val()) || 0;

        // 过滤掉默认选项和数量为0的无效数据
        if (selectedItem !== "Seçiniz" && qty > 0) {
            // 累计数量：如果选项已存在则累加，否则初始化数量
            itemCounter[selectedItem] = (itemCounter[selectedItem] || 0) + qty;
        }
    });

    // 将统计结果格式化为目标字符串
    const outputStr = Object.entries(itemCounter)
        .map(([item, count]) => `${count}次${item}`)
        .join("，");

    // 输出到控制台
    console.log(outputStr);
});

代码细节说明 #

• 行元素关联：通过遍历.field-group容器，确保每次获取的下拉选项和数量都属于同一行，彻底解决了之前分开遍历无法匹配的问题。
• 重复选项合并：利用itemCounter对象记录每个选项的总数量，遇到重复选项时自动累加数量，无需额外判断重复逻辑。
• 无效数据过滤：跳过了默认的"Seçiniz"选项和数量为0的情况，避免输出无意义的内容。
• 格式生成：通过Object.entries将统计对象转为键值对数组，再用map生成X次Y的格式，最后用join拼接成连贯的字符串。

测试效果示例 #

假设你添加了以下3行数据：

• 下拉选「Kişi Ekleme」，数量输入2
• 下拉选「Proje Açma」，数量输入3
• 下拉选「Kişi Ekleme」，数量输入1

控制台会输出：3次Kişi Ekleme，3次Proje Açma

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