如何用jQuery基于data属性隐藏重复的Default变体option？

需求：当<select>内存在相同data-addon-name的重复<option>时，隐藏data-variant-name="Default"的选项。现有脚本未达到预期效果。

原HTML代码 #

<div id="c-product-bundling">

  <select id="ropeEndFinish1" name="properties[End 1 Finish]" data-gtm-form-interact-field-id="1">
    <option value="Splice Eyelet End w-Thimble" data-addon-name="Splice Eyelet End w-Thimble" data-addon-price="30.00" data-addon-id="47367371030849" data-variant-name="Default" style="display: initial;">Splice Eyelet End w-Thimble - $30.00</option>
    <option value="Splice Eyelet End w-Thimble" data-addon-name="Splice Eyelet End w-Thimble" data-addon-price="45.00" data-addon-id="47367371063617" data-variant-name="32mm" style=""></option>
  </select>

  Another select with the same thing.

</div>

原jQuery代码 #

// Function to hide the options with the same value and display only the one with variant-name="Default"
function hideOptionsWithSameValue() {
  // Iterate through each select element
  $("#c-product-bundling select").each(
    function () {
      const currentSelect = $(this);
      console.log(
        "%cBeing run for" + JSON.stringify(currentSelect, null, "\t"),
        "color: Cyan; font-family: sans-serif; font-size: 16px"
      );

      // Object to store seen options based on their values
      const seenOptions = {};
      const duplicateDefaultOptions = {}; // Move this line inside the loop

      // Iterate through each option element
      currentSelect.find("option").each(function () {
        const currentOption = $(this);
        const optionValue = currentOption.data("addon-name");

        // Check if an option with the same value has been seen
        if (seenOptions[optionValue]) {
          // Record the duplicate option with variant-name="Default"
          if (currentOption.data("variant-name") === "Default") {
            duplicateDefaultOptions[optionValue] = true;
          }
        } else {
          // Mark the option as seen
          seenOptions[optionValue] = true;
        }
      });

      // Hide the duplicate options with variant-name="Default"
      for (const optionValue in duplicateDefaultOptions) {
        currentSelect
          .find(`option[value="${optionValue}"][data-variant-name="Default"]`)
          .css("display", "none");

        console.log(
          "%cDuplicate Default option hidden for value: " + optionValue,
          "color: Cyan; font-family: sans-serif; font-size: 16px"
        );
      }

      console.log(
        "%cThese have been marked for seenOptions" +
          JSON.stringify(seenOptions, null, "\t"),
        "color: Cyan; font-family: sans-serif; font-size: 16px"
      );
      console.log(
        "%cThese have been marked for duplicateDefaultOptions" +
          JSON.stringify(duplicateDefaultOptions, null, "\t"),
        "color: Cyan; font-family: sans-serif; font-size: 16px"
      );
    }
  );

  console.log(
    "%cCompleted sorting through all Addon Selects",
    "color: Cyan; font-family: sans-serif; font-size: 16px"
  );
}
hideOptionsWithSameValue();

问题分析与修复方案 #

原脚本的问题 #

1. 逻辑颠倒：原脚本仅在后续出现的重复选项是Default时才标记隐藏，但实际场景是Default选项先出现、后续是其他变体，这种情况不会被检测到。
2. 选择器不准确：用value属性匹配选项，但需求是基于data-addon-name判断重复，直接用data-addon-name选择更可靠。
3. 统计方式错误：仅标记是否见过，未统计每个data-addon-name对应的选项数量，无法准确判断是否存在重复。

修正后的代码 #

function hideOptionsWithSameValue() {
  $("#c-product-bundling select").each(function() {
    const currentSelect = $(this);
    // 统计每个data-addon-name对应的选项数量
    const addonCount = {};
    
    // 第一步：统计数量
    currentSelect.find("option").each(function() {
      const addonName = $(this).data("addon-name");
      addonCount[addonName] = (addonCount[addonName] || 0) + 1;
    });
    
    // 第二步：当数量大于1时，隐藏该组的Default选项
    currentSelect.find("option[data-variant-name='Default']").each(function() {
      const addonName = $(this).data("addon-name");
      if (addonCount[addonName] > 1) {
        $(this).css("display", "none");
        console.log(`隐藏了重复的Default选项：${addonName}`);
      }
    });
  });
  console.log("所有select处理完成");
}
hideOptionsWithSameValue();

修正说明 #

1. 统计数量：先遍历所有选项，统计每个data-addon-name对应的选项总数，准确判断是否存在重复。
2. 针对性隐藏：找到所有Default选项，检查其对应的data-addon-name是否有多个选项，有则隐藏。
3. 逻辑更直接：覆盖了Default选项在前或在后的所有场景，避免原脚本的逻辑漏洞。

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