javascript - 如何在html <select>中使用onclick事件

Question

我的博客上有一个视频更改器，可以使用 onclick 更改 YouTube 上的视频。但这在 Safari 和 Chrome 中使用 select 标签不起作用。

我已经阅读了很多有关如何执行此操作的其他问题，但我没有运气将其转换为使用 onchange 和 select 标签来工作。

我是 JavaScript 新手。

顺便说一句，当插入 jsfiddle、pastebin 或任何其他服务时，我还没有让它工作。

但如果将其粘贴到 http://htmledit.squarefree.com 中，它确实有效。尝试单击不同的电影名称以了解我的意思。

但基本上，我需要它与 select 标签一起使用，而不是 span 标签。

<div id='Trailer5' style='display:none'><iframe width='700' height='430' src='http://www.youtube-nocookie.com/embed/vEO9iLWBWvw?theme=light&amp;version=3&amp;rel=0&amp;ps=blogger&amp;iv_load_policy=3&amp;showinfo=0' frameborder='0' allowfullscreen></iframe><h3>July 12th, 2013</h3></div>
<div id='Trailer10' style='display:none'><iframe width='700' height='430' src='http://www.youtube-nocookie.com/embed/Fkbm8a40TC4?theme=light&amp;version=3&amp;rel=0&amp;ps=blogger&amp;iv_load_policy=3&amp;showinfo=0' frameborder='0' allowfullscreen></iframe><h3>June 20th, 2014</h3></div>
<span onclick='return playVideo("Trailer5","videoPlayback")'>Terms and Conditions may Apply</span><br/>
<span onclick='return playVideo("Trailer10","videoPlayback")'>How to Train your Dragon 2</span>
<div id='videoPlayback'><iframe width='700' height='430' src='http://www.youtube-nocookie.com/embed/Fkbm8a40TC4?theme=light&amp;version=3&amp;rel=0&amp;ps=blogger&amp;iv_load_policy=3&amp;showinfo=0' frameborder='0' allowfullscreen></iframe></div></br><h3>Movie "in Theaters" Date Shown Here</h3></div>
<script type='text/javascript'>function playVideo(a,b){"string"==typeof a&&(a=document.getElementById(a));"string"==typeof b&&(b=document.getElementById(b));b.innerHTML=a.innerHTML;return!1}</script></div>

Answer 1

在线演示:http://jsfiddle.net/thefourtheye/GP5HE/

您可以使用此标签代替 SPAN 标签

<select onChange="playVideo(this)">
    <option value="Trailer5">Terms and Conditions may Apply</option>
    <option value="Trailer10">How to Train your Dragon 2</option>
</select>

脚本必须这样修改

<script type='text/javascript'>
    function playVideo(a)
    {
        a = document.getElementById(a.value);
        b = document.getElementById("videoPlayback");
        b.innerHTML = a.innerHTML;
    }
</script>