如何在Webflow中获取选中商品选项的文本内容？

1. 初始获取当前选中的选项文本 #

直接通过属性选择器定位已选中的选项，再提取内部文本：

// 定位当前选中的选项元素
const selectedOption = document.querySelector('[role="radio"][aria-checked="true"]');
// 提取选项文本（做空值判断避免报错）
const selectedText = selectedOption ? selectedOption.querySelector('.text-block-3').textContent.trim() : '';
console.log(selectedText); // 输出当前选中值，例如"red"

2. 监听选项变更，实时获取选中值 #

利用事件委托监听选项组的点击事件，确保动态加载的选项也能触发，同时等待Webflow完成内部状态更新：

// 获取颜色选项组容器（可根据aria-label或类名定位）
const colorOptionGroup = document.querySelector('[role="radiogroup"][aria-label="Color"]');

// 监听容器内的点击事件
colorOptionGroup.addEventListener('click', (e) => {
  // 找到点击的选项元素（兼容点击子元素的情况）
  const clickedPill = e.target.closest('[role="radio"]');
  if (!clickedPill) return;

  // 短延迟等待Webflow更新选中状态
  setTimeout(() => {
    const newSelected = colorOptionGroup.querySelector('[role="radio"][aria-checked="true"]');
    if (newSelected) {
      const currentSelectedText = newSelected.querySelector('.text-block-3').textContent.trim();
      console.log('当前选中的选项：', currentSelectedText);
      // 此处可将currentSelectedText作为变量用于后续业务逻辑
    }
  }, 100);
});

额外提示 #

• 若页面存在多个选项组（如颜色、尺寸），可通过data-commerce-option-set-id或不同的aria-label值区分定位，避免冲突。
• 也可通过Webflow的选中类w--ecommerce-pill-selected替代aria-checked="true"作为选择器，效果一致。

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