Javascript 如何从选择菜单更改为按钮

我有一个购物车按钮集成使用。我已经创建了一个带有产品选项的选择菜单，我有一些javascript将所选选项绑定到按钮，以便在单击“添加到购物车”时将正确的选项添加到购物车

我想用按钮代替下拉菜单。我不知道如何更改我的代码

<select id="color">
  <option>red</option>
  <option>blue</option>
  <option>yellow</option>
</select>

红色
蓝色
黄色的

---

如果要在将项目添加到购物车之前更新项目（您希望在产品页面上而不是购物车中使用颜色选项），可以创建多个按钮，并在单击时更新data-item-custom1-value

<button class="options" data-value="red">Red</button>
<button class="options" data-value="blue">Blue</button>
<button class="options" data-value="green">Green</button>

const addButton = document.querySelector('#add-button');

document.querySelectorAll('.options').forEach(option => {
  option.addEventListener('click', () => {
    const value = option.getAttribute('data-value')
    addButton.setAttribute('data-item-custom1-value', value)
  })
})


红色
蓝色
绿色
const addButton=document.querySelector（“#add button”）；
document.querySelectorAll（'.options'）.forEach（option=>{
option.addEventListener（'click'，（）=>{
常量值=option.getAttribute（'data-value'）
addButton.setAttribute（'data-item-custom1-value'，value）
})
})

不幸的是，如果您想用按钮替换购物车内的按钮，目前不可能这样做。也就是说，我将明确地将自定义字段覆盖添加到我们的待办事项列表中

你可以发电子邮件给我们support@snipcart.com如果你有进一步的问题

干杯

Lea-Snipcart的开发者
@Lea感谢您的回复，我正在使用statamic cms并通过选项进行循环，这些选项将由用户输入决定。因此，它实际上不会是一个固定的红蓝绿或任何用户在CMS中选择的选项。我发布的选择菜单版本工作得很好，因为它没有引用特定的选项，这可以通过按钮实现吗？我想使用“this”嗨，弗雷德，我刚刚更新了代码片段。这应该适合你的需要。
<script>
  $('#color').change(function() {
    $('#add-button').attr('data-item-custom1-value', $(this).val());
  });
</script>

<button class="options" data-value="red">Red</button>
<button class="options" data-value="blue">Blue</button>
<button class="options" data-value="green">Green</button>

const addButton = document.querySelector('#add-button');

document.querySelectorAll('.options').forEach(option => {
  option.addEventListener('click', () => {
    const value = option.getAttribute('data-value')
    addButton.setAttribute('data-item-custom1-value', value)
  })
})