Javascript 如何使用按钮更改当前选定的选项

我创建了两个按钮，左边和右边。对于左侧，我希望获得上一个选中的选项，对于右侧，则在当前选项旁边。如何做到这一点

例如，现在我选择了id='black'的选项，所以使用right按钮我会切换到silver id选项，或者使用left切换到white而不使用，只使用按钮。先谢谢你

bttnRight.addEventListener（“单击”，函数（）{
console.log（'rigth'））
});
bttnLeft.addEventListener（“单击”，函数（）{
console.log（'left'））
});


向两个按钮添加单击侦听器


您可以使用单个处理程序，只需传入您希望移动的金额，例如，在左键上单击移动
-1
步骤，在右键上单击移动
+1
步骤


然后设置所选索引，如下面的代码段所示




const select=document.querySelector（“select”）；
const{options:{length}}=select；
document.getElementById（“btn左”）.addEventListener（“单击”，（）=>handleClick（-1））；
document.getElementById（“btn right”）.addEventListener（“单击”，（）=>handleClick（1））；
函数handleClick（增量）{
select.selectedIndex=（select.selectedIndex+length+delta）%length；
}

一个
两个
三
四
五
左边
右
首先，应该避免向
元素添加
id
属性。只需将
id
添加到

现在，您可以将适当的数据属性添加到按钮中，以定位
元素，这样您就可以通过更新
选择的索引来循环执行
选项


const
getSelectedText=（{selectedOptions:[{text}]}）=>text，
导航=（{dataset:{target}，方向）=>{
常数
select=document.querySelector（目标），
{selectedIndex=0，选项：{length}}=select，
箭头=方向<0？''；
select.selectedIndex=（selectedIndex+长度+方向）%length；
log（`将选择（${arrow}）更改为：${getSelectedText（select）}`）；
},
navPrev=e=>nav（e.target，-1），
navNext=e=>nav（e.目标+1）；
document.querySelector（'.btn prev'）。addEventListener（'click'，navPrev'）；
document.querySelector（'.btn next'）。addEventListener（'click'，navNext）

白色
黑色
银币
上
下一步
那么，您想使用按钮选择选项吗？或者你的目标是旋转木马，这只是你提供的一个演示。是的，我想使用按钮更改选项，而不单击下拉菜单list@AndreGTH请检查这是否解决了您的问题，如果您有任何问题，请告诉我。这正是我所需要的。多谢各位@安德烈很高兴我能帮忙。如果这解决了你的问题，请接受这个答案。