Javascript 如何根据用户选择的HTML选项更改select的背景色？

当用户选择选项红色时，我想更改选择的背景颜色，然后更改选择全部红色的背景。当用户选择粉红色时，选择背景色为粉红色。尝试解决这个问题大约3个小时

我已经尝试了addEventListener，也在select中进行了更改，但不起作用

const select=document.querySelector（'select'）；
select.addEventListener（'change'，（事件）=>{
console.log（event.target.value）
如果（event.target.value='red'）{
select.style.background='red'；
}
else if（event.target.value='pink'）{
select.style.background='pink'
}
否则{
select.style.background='yellow'
}
});

红色
粉红色
黄色的
文档。querySelector是一种方法，因此您应该将其作为函数调用：

document.querySelector('#select')

此外，您可以直接将选择值写入背景色，这样您就不需要if/else条件：

select.style.background = event.target.value

最终版本可能如下所示：


const select=document.querySelector（'select'）；
select.addEventListener（'change'，（事件）=>{
选择.style.background=event.target.value
});

红色
粉红色
黄色的
首先，您定义的
选择不正确。其次，您的
if
谓词应该使用相等比较器
==
，而不是赋值运算符
=


const select=document.querySelector（'select'）；
select.addEventListener（'change'，（事件）=>{
console.log（event.target.value）
如果（event.target.value==='red'）{
select.style.background='red'；
}else if（event.target.value==='pink'）{
select.style.background='pink'
}否则{
select.style.background='yellow'
}
});

红色
粉红色
黄色的
您使用的
查询选择器不正确。它应该作为一个方法调用，选择器作为它的参数，如下所示：

const select=document.querySelector（'select'）