加載一個div到另一個DIV（IE8，Chrome瀏覽器）

我剛開始學習JavaScript和好像我已經撞上了牆就下拉列表，並在加載一個div到另一個DIV選擇。我正在設置一個下拉框，它不過是包含嵌入式視頻的不同div的列表。當選擇我想要的DIV被加載到主要的div加載一個div到另一個DIV（IE8，Chrome瀏覽器）

現在我有下面的代碼工作在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>

來源

2011-06-15 Jason

使用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-15 07:20:13 kleinohad

謝謝！這幫了很多。看着這兩個答案，我需要開始研究jquery來幫助我解決這類問題。我想它是另一件要學習的東西！ – Jason 2011-06-15 19:04:33

這是一個可以工作的版本;它使用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-15 06:54:43

加載一個div到另一個DIV（IE8，Chrome瀏覽器）

回答

相關問題