1

我刚刚开始学习 javascript，似乎我遇到了关于下拉列表和在选择时将 div 加载到另一个 div 的墙。我正在设置一个下拉框，它只不过是一个包含嵌入视频的不同 div 列表。选择后，我希望将 div 加载到主 div

现在我下面的代码适用于 Firefox，但不适用于 Chrome 或 IE8。我已经搜索并阅读了 IE8 和 Chrome 不喜欢在选项标签中使用 onclick。如果为真，我该如何让下面的代码在 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>
4

2 回答 2

2

这是一个有效的版本；它使用 jQuery 只是为了方便，但您可以毫无问题地使用标准 javascript （将术语传递给我）。

http://jsfiddle.net/MisterJack/qw6DL/

主要问题是 HTML 是错误的，尤其是select标签没有关闭，以及option标签。

我所做的只是将选择onChange事件（不是选项！）绑定到更新内容的函数。

此函数搜索option当前选择的内容，读取其value属性（要从中加载内容的 div 的 id）并相应地更新内容。

$('select').change(function() {
    var domElement = $('select option:selected').attr('value');
    $('#videoPlayback').html($('#' +  domElement.toString()).html()); 
});
于 2011-06-15T06:54:43.337 回答
1

用 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>
于 2011-06-15T07:20:13.517 回答