从下拉列表中进行选择，将一个div加载到另一个divIE8，Chrome中

问题描述

| 我刚刚开始学习javascript，似乎我遇到了有关下拉列表的问题，并在选择时将div加载到另一个div中。我正在设置一个下拉框，仅此而已就是带有嵌入式视频的不同div列表。选择后，我希望将div加载到主div中 现在，我下面的代码可在Firefox上运行，但不能在Chrome或IE8上运行。我已经搜索并阅读到IE8和Chrome浏览器不喜欢在选项标签中使用onclick。如果为true，如何使以下代码在IE8和Chrome上有用？ 到目前为止，我已经尝试过： 使用onsubmit并添加一个提交按钮-无法使其正常工作 使用onchange-无法正常工作！ 在这一点上，如果我只是滥用事件处理程序，而我的功能可能还不够完善，我将不会感到惊讶，但是我已经花了好几个小时尝试各种不同的尝试而徒劳无功。 有什么建议么？

     <div id=\"videodiv\" style=\'display: none\'> Some embedded video code</div>

     <div id=\"videodiv2\" style=\'display: none\'> Different Embedded video code</div>

     <div id=\"videoPlayback\"> The div where all the embedded videos will end up loading</div>     


      <script type=\"text/javascript\">
      function playVideo(sourceId,targetId) {
      if (typeof(sourceId)==\'string\') {sourceId=document.getElementById(sourceId);}
      if (typeof(targetId)==\'string\') {targetId=document.getElementById(targetId);}
      targetId.innerHTML=sourceId.innerHTML;
      return false;
                   }
      </script>

<select><option selected>Please Select...
<option onclick=\'return playVideo(\"videodiv2\",\"videoPlayback\")\'>Video Div2>

    

解决方法

        尝试与此jQuery：

<div id=\"videodiv\" style=\'display: none\'> Some embedded video code</div>

     <div id=\"videodiv2\" style=\'display: none\'> Different Embedded video code</div>

     <div id=\"videoPlayback\"> The div where all the embedded videos will end up loading</div>     
<script type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js\"></script>

      <script type=\"text/javascript\">
      var sourceDiv;
      var targetDiv;
      function playVideo(sourceId,targetId) {
      sourceDiv=$(\"#\"+sourceId);
      targetDiv=$(\"#\"+targetId);
      targetDiv.html(sourceDiv.html());
       }
      </script>

<select id=\"videos\"><option selected=\"selected\" >Please Select...</option>
<option value=\"videodiv\">Video Div1</option>
<option value=\"videodiv2\">Video Div2</option>
</select>


<script type=\"text/javascript\">

function videoChanged() {
    //var videoSelectList = $(\'select#videos\');
    var selectedValue = $(\'#videos\').val();

    //alert(selectedValue);

    if (selectedValue != \'Please Select...\') {
        playVideo(selectedValue,\'videoPlayback\');
    }
}

$(function() {
    //alert(\'my alert\');
    $(\'select#videos\').change(videoChanged);
});

</script>

    ,        这是一个有效的版本；它只是为了方便起见使用jQuery，但是您可以使用标准javascript（将术语传递给我）没有问题。 http://jsfiddle.net/MisterJack/qw6DL/ 主要问题是HTML错误，尤其是

select

标签和

option

标签没有关闭。 我所做的只是将select的

onChange

事件（不是选项！）绑定到更新内容的函数。 此函数搜索当前选择的

option

，读取其

value

属性（这是从中加载内容的div的ID），并相应地更新内容。

$(\'select\').change(function() {
    var domElement = $(\'select option:selected\').attr(\'value\');
    $(\'#videoPlayback\').html($(\'#\' +  domElement.toString()).html()); 
});