how to use onclick event in html <select>

26,357

Online Demo: http://jsfiddle.net/thefourtheye/GP5HE/

Instead of the SPAN tags, you can use this

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

And the script has to be modified like this

<script type='text/javascript'>
    function playVideo(a)
    {
        a = document.getElementById(a.value);
        b = document.getElementById("videoPlayback");
        b.innerHTML = a.innerHTML;
    }
</script>
Share:
26,357
user2875405
Author by

user2875405

Updated on July 09, 2022

Comments

  • user2875405
    user2875405 almost 2 years

    I have a video changer on my blog that can change videos on youtube using onclick. But that does't work using the select tag in Safari & Chrome.

    I've read a bunch of other questions on how to do this but am having no luck in converting this to work using onchange with the select tag.

    I am new to javascript.

    BTW, I have not gotten this to work when plugged into jsfiddle, pastebin, or any other service.

    But it does work if your paste it into http://htmledit.squarefree.com Try clicking on the different movie names to see what I mean.

    But basically, I need this to work with the select tag, instead of span tag.

    <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>