下拉框变更时更新购物车URL的quantity参数并实现增量计数

有4个选项完全相同的下拉选择框，需要实现以下功能：

• 用户选择选项时，更新「加入购物车」按钮的URL，将对应选项data-uid的quantity值同步更新
• 同一data-uid被多个下拉框选中时，数量要累加
• 当前使用splice方法修改URL，但每次修改都会从原始URL重新开始，无法保留之前的修改记录，导致历史选择丢失

原始代码 #

HTML #

<div class="pick-flavor-wrapper">

    <h2>PICK 4 FLAVORS</h2>

    <select class="dropdown_1">
        <option value="none" selected disabled hidden>Select an Option</option>
        <option value="1" data-uid="689992">Thca 1</option>
        <option value="2" data-uid="689994">Thca 2</option>
        <option value="3" data-uid="690667">Thca 3</option>
        <option value="4" data-uid="690669">Thca 4</option>
    </select>
    
    <select class="dropdown_2">
        <option value="none" selected disabled hidden>Select an Option</option>
        <option value="1" data-uid="689992">Thca 1</option>
        <option value="2" data-uid="689994">Thca 2</option>
        <option value="3" data-uid="690667">Thca 3</option>
        <option value="4" data-uid="690669">Thca 4</option>
    </select>
    
    <select class="dropdown_3">
        <option value="none" selected disabled hidden>Select an Option</option>
        <option value="1" data-uid="689992">Thca 1</option>
        <option value="2" data-uid="689994">Thca 2</option>
        <option value="3" data-uid="690667">Thca 3</option>
        <option value="4" data-uid="690669">Thca 4</option>
    </select>
    
    <select class="dropdown_4">
        <option value="none" selected disabled hidden>Select an Option</option>
        <option value="1" data-uid="689992">Thca 1</option>
        <option value="2" data-uid="689994">Thca 2</option>
        <option value="3" data-uid="690667">Thca 3</option>
        <option value="4" data-uid="690669">Thca 4</option>
    </select>

</div>

<a class="add_to_cart_grouped" href="https://example.com/?add-to-cart=689991&quantity[689992]=0&quantity[689994]=0&quantity[690667]=0&quantity[690669]=0">Add to cart</a>

JavaScript #

// Get product ID
document.querySelectorAll("select").forEach(dropdown => {
        let prodID;
    
        dropdown.addEventListener("change", () => {
           let selectedOptionID = dropdown.selectedIndex;
           prodID = dropdown.options[selectedOptionID].dataset.uid;
           updateURL(prodID);
        })
})

function updateURL(prodID) {
    let href = document.querySelector(".add_to_cart_grouped").getAttribute("href");
    let urlIndex = href.indexOf(prodID);
    let arr = [...href];         
    arr.splice(urlIndex + 8, 1, "1");
    href = arr.join("");
    console.log(href)
}

当前代码的核心缺陷：

1. 无状态维护：每次修改都从DOM中读取原始URL，没有保存之前的修改结果，导致历史选择无法累积
2. 字符串操作脆弱：用splice直接修改字符串，依赖固定的位置偏移（urlIndex + 8），一旦URL结构变化就会失效，且无法处理数量大于1的情况

通过维护一个实时数量状态对象，结合原生URL对象处理查询参数，实现可靠的URL更新：

// 初始化数量状态，从原始URL提取初始值
const quantityState = {};
const cartLink = document.querySelector(".add_to_cart_grouped");
const originalUrl = new URL(cartLink.href);

// 提取所有quantity参数到状态对象
originalUrl.searchParams.forEach((value, key) => {
  if (key.startsWith("quantity[")) {
    const uid = key.match(/quantity\[(\d+)\]/)[1];
    quantityState[uid] = parseInt(value, 10);
  }
});

// 记录每个下拉框之前选中的uid，用于取消选择时回退数量
const dropdownPrevSelections = new Map();

// 绑定所有下拉框的change事件
document.querySelectorAll("select").forEach(dropdown => {
  dropdown.addEventListener("change", () => {
    const prevUid = dropdownPrevSelections.get(dropdown);
    const selectedOption = dropdown.options[dropdown.selectedIndex];
    const currentUid = selectedOption.dataset?.uid;

    // 处理上一次选择：如果之前选过有效选项，数量减1
    if (prevUid && quantityState[prevUid] > 0) {
      quantityState[prevUid]--;
    }

    // 处理当前选择：如果选了有效选项，数量加1
    if (currentUid) {
      quantityState[currentUid] = (quantityState[currentUid] || 0) + 1;
      dropdownPrevSelections.set(dropdown, currentUid);
    } else {
      // 选了默认选项，清空该下拉框的历史记录
      dropdownPrevSelections.delete(dropdown);
    }

    // 重新构建完整URL
    const newUrl = new URL(originalUrl.origin + originalUrl.pathname);
    // 保留原始的add-to-cart参数
    newUrl.searchParams.set("add-to-cart", originalUrl.searchParams.get("add-to-cart"));
    // 更新所有quantity参数
    Object.entries(quantityState).forEach(([uid, count]) => {
      newUrl.searchParams.set(`quantity[${uid}]`, count.toString());
    });

    // 更新按钮的href属性
    cartLink.href = newUrl.toString();
    console.log("更新后的购物车URL:", cartLink.href);
  });
});

关键特性 #

• 状态持久化：用quantityState跟踪每个ID的实时数量，确保修改是累积的
• 可靠的URL处理：使用原生URL和URLSearchParams操作查询参数，避免手动字符串拼接的错误
• 支持取消选择：记录每个下拉框的上一次选择，用户切换回默认选项时自动回退数量
• 扩展性强：新增选项或下拉框时，无需修改核心逻辑，只需保证data-uid匹配即可

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