更改 Select 选项中的图像

Question

我想构建以下结构：在选择/选项旁边加载图像，当更改选项时，也更改图像。 Html：

<label for="Estilo"> Arte Marcial:</label>
<select name="Estilo" id="estilo">
    <option value=""> </option>
    <option value="Taekwondo" id="taekwondo">Taekwondo</option>
    <option value="Boxe" id="boxe">Boxe</option>
    <option value="Karate" id ="karate">Karate</option>
</select>
<img src="/imgs/mestra.png" class="imagem__muda">

我已经尝试了不同的解决方案，但都没有奏效，但我认为我接近以下代码的解决方案：

const selecionado = document.querySelector('#estilo')

selecionado.addEventListener('onChange',()=>{

  if (selecionado.value == "Boxe"){
    foto.src= '/imgs/boxe.png'
  }

  
})

另外，这是解决我的问题的最佳选择吗？ 我已经搜索了其他问题和答案，但它们总是使用按钮，所以我认为它们不适用。

Answer 1

您的代码中有两个问题：

1. 您没有对foto的引用。
2. 由于onChange是一个 HTML 属性，因此在 JavaScript 中使用时应使用change而不是onChange 。

 const selecionado = document.querySelector('#estilo'); var foto = document.querySelector('.imagem__muda'); selecionado.addEventListener('change', ()=>{ if (selecionado.value == "Boxe"){ foto.src = '/imgs/boxe.png'; } });

 <label for="Estilo"> Arte Marcial:</label> <select name="Estilo" id="estilo"> <option value=""> </option> <option value="Taekwondo" id="taekwondo">Taekwondo</option> <option value="Boxe" id="boxe">Boxe</option> <option value="Karate" id ="karate">Karate</option> </select> <img src="/imgs/mestra.png" class="imagem__muda">