Question

当您选择要查看的电影时，我试图制作一个显示电影海报的表单。我写了一个函数，但我是javascript的新手，有些东西没有正常工作。

感谢您提供的任何帮助。

JS

function setMovie() {
  var img = document.getElementById("movimg");
  var value = img.options[img.selectedIndex].value;
  var selected = document.getElementById("selectedMovie");
  selected.src = this.value;
  return false;
}
document.getElementById("movieList").onChange = setMovie();

HTML

<select id="movimg" onChange="setMovie(this)">
  <option value="null.png">Select a movie!</option>
  <option value="bvs.jpg">Batman vs. Superman</option>
  <option value="tjb.jpg">The Jungle Book</option>
  <option value="tgf.jpg">The Godfather</option>
  <option value="tpb.jpg">The Princess Bride</option>
  <br>
</select>
<img src="" id="selectedMovie" />

Answer 1

您正在引用movieList，这是一个不存在的ID。您也不需要在函数中返回false。

var select_box = document.getElementById("movimg"),
    image_box = document.getElementById("selectedMovie");

function setMovie() {
  var value = select_box.options[select_box.selectedIndex].value;
  image_box.src = this.value;
}

select_box.addEventListener("change", setMovie);

<select id="movimg">
        <option value="null.png">Select a movie!</option>
        <option value="bvs.jpg">Batman vs. Superman</option>
        <option value="tjb.jpg">The Jungle Book</option>
        <option value="tgf.jpg">The Godfather</option>
        <option value="tpb.jpg">The Princess Bride</option>
</select> 
<img src="" id="selectedMovie"/>

Answer 2

您可以将功能更改为：

 function setMovie(){
    document.getElementById("selectedMovie").src = document.getElementById("movimg").value;
    }

如何设置要从下拉菜单选项中显示的图像？

2 个答案: