根据下拉选择器选中option的data-id动态修改按钮对应属性的实现方案

实现方案 #

直接使用原生JavaScript即可实现需求，代码如下：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取下拉选择器元素
  const productSelector = document.getElementById('product-selector');
  // 获取加入心愿单按钮元素
  const wishlistBtn = document.querySelector('.tinvwl_add_to_wishlist_button');

  // 定义更新按钮属性的函数
  function updateWishlistBtnAttr() {
    // 获取当前选中的option
    const selectedOption = productSelector.options[productSelector.selectedIndex];
    // 获取选中option的data-id值
    const selectedId = selectedOption.dataset.id;
    // 更新按钮的两个自定义属性
    wishlistBtn.dataset.tinvWlProductvariation = selectedId;
    wishlistBtn.dataset.tinvWlProductvariations = `[${selectedId}]`;
  }

  // 页面加载完成后先执行一次，保证初始状态和默认选中项匹配
  updateWishlistBtnAttr();
  // 给下拉框绑定change事件，选择变化时自动更新属性
  productSelector.addEventListener('change', updateWishlistBtnAttr);
});

代码说明 #

• 所有逻辑在DOM完全加载后执行，避免出现找不到对应元素的报错
• 主动在初始化阶段执行一次属性更新逻辑，保证按钮初始属性和下拉框默认选中项一致
• 直接操作元素的dataset对象修改自定义data-*属性，无需手动调用setAttribute方法，写法更简洁

如果你的项目已经引入了jQuery，也可以使用以下代码实现：

$(document).ready(function() {
  const $productSelector = $('#product-selector');
  const $wishlistBtn = $('.tinvwl_add_to_wishlist_button');

  function updateAttr() {
    const selectedId = $productSelector.find('option:selected').data('id');
    $wishlistBtn.attr('data-tinv-wl-productvariation', selectedId);
    $wishlistBtn.attr('data-tinv-wl-productvariations', `[${selectedId}]`);
  }

  updateAttr();
  $productSelector.on('change', updateAttr);
});

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