顯示下拉菜單選擇在IFRAME

你會看到一個下拉菜單，讓你展現在iframe中7可用的視頻推薦的一個選項。

請注意：目前，當您沒有做出選擇時，可以看到顯示在「學習車道」上行走的人的標準圖片。

如果有人沒有選擇，所以下拉菜單顯示「maak hier je keuze」，我想將當前圖片自動替換爲7種視頻推薦中的一種，以便每週的每一天自動在iframe中顯示7個視頻褒獎之一。

在此先感謝您的任何幫助。期待您的回覆。

============================================== ===================

我到目前爲止所使用的代碼如下：

function setIframeSource() { 
 
    var theSelect = document.getElementById('location'); 
 
    var theIframe = document.getElementById('myIframe'); 
 
    var theUrl; 
 
    
 
    theUrl = theSelect.options[theSelect.selectedIndex].value; 
 
    theIframe.src = theUrl; 
 
}

div { \t \t \t \t \t 
 
\t font-family: Verdana; 
 
\t padding: 0px; 
 
    \t border: 0px solid #000000; \t \t 
 
} 
 
.txt3 { 
 
\t font-weight: normal; 
 
    \t font-size: 100%; 
 
\t font-weight: bold; 
 
\t font-family: Verdana; \t 
 
} 
 
.txt4 { 
 
\t font-weight: normal; 
 
    \t font-size: 100%; 
 
\t font-weight: bold; 
 
\t font-family: Verdana; \t 
 
    \t margin-top: 2px; \t \t 
 
    \t margin-left: 0px; 
 
    \t color:#000000; 
 
\t border: 2px solid #BC401E; 
 
}

<form id="form1" method="post"> 
 
\t <label class="txt3"> De video-testimonial van: <select class="txt4" id="location" onchange="setIframeSource()"> 
 
\t \t <option value="http://www.alumnei.nl/images/learninglane.jpg">... maak hier je keuze ...</option> 
 
\t \t <option value="https://www.youtube.com/embed/tP4i7CiMHh4">Monique van Neutegem</option> 
 
\t \t <option value="https://www.youtube.com/embed/Bx5Np1wIXYs">Marjon Heintjes</option> 
 
\t \t <option value="https://www.youtube.com/embed/J-NChlqVAgY">Els de Groot</option> 
 
\t \t <option value="https://www.youtube.com/embed/r_UB0rTH7SA">Arthur Alferink</option> 
 
\t \t <option value="https://www.youtube.com/embed/t66K_g-fkFY">Monique Fortuin</option> 
 
\t \t <option value="https://www.youtube.com/embed/8DC-3DiVL4A">Erna Slangen</option> 
 
\t \t <option value="https://www.youtube.com/embed/8Gvu_lgZZAM">Stephanie de Witte</option> 
 
\t </select></label> 
 
</form> 
 
<br><br> 
 

 
<iframe id="myIframe" src="http://www.alumnei.nl/images/learninglane.jpg" frameborder="0" marginwidth="0" marginheight="0" width="580" height="400" allowfullscreen scrolling="no"></iframe>

來源

2016-06-10 Piotr Linski

它應該是你的需要。

<html> 
     <head> 
     <style> 
      div {     
      font-family: Verdana; 
      padding: 0px; 
      border: 0px solid #000000;  
     } 
     .txt3 { 
      font-weight: normal; 
       font-size: 100%; 
      font-weight: bold; 
      font-family: Verdana; 
     } 
     .txt4 { 
      font-weight: normal; 
       font-size: 100%; 
      font-weight: bold; 
      font-family: Verdana; 
       margin-top: 2px;   
      margin-left: 0px; 
       color:#000000; 
      border: 2px solid #BC401E; 
     } 
     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     </head> 
     <body> 
      <script language=javascript> 
       var theSelect,theIframe; 
       var today = new Date(), 

      number_of_day = today.getDay(); 
       $(document).ready(function() { 
       //var today = new Date(); 
       //var n = today.getDay(); 
       theSelect = document.getElementById('location'); 
       theIframe = document.getElementById('myIframe'); 
       theUrl = theSelect.options[number_of_day].value; 
       theIframe.src = theUrl; 
      }); 
      function setIframeSource() 
      { 
       var theUrl; 

       if (theSelect.selectedIndex > 0) { 
        theUrl = theSelect.options[theSelect.selectedIndex].value; 
       } else { 
        theUrl = theSelect.options[number_of_day].value; 
       } 
       theIframe.src = theUrl; 
      } 
      </script> 
      <form id="form1" method="post"> 
      <label class="txt3"> De video-testimonial van: 
      <select class="txt4" id="location" onchange="setIframeSource()"> 
       <option value="http://www.alumnei.nl/images/learninglane.jpg">... maak hier je keuze ...</option> 
       <option value="https://www.youtube.com/embed/tP4i7CiMHh4">Monique van Neutegem</option> 
       <option value="https://www.youtube.com/embed/Bx5Np1wIXYs">Marjon Heintjes</option> 
       <option value="https://www.youtube.com/embed/J-NChlqVAgY">Els de Groot</option> 
       <option value="https://www.youtube.com/embed/r_UB0rTH7SA">Arthur Alferink</option> 
       <option value="https://www.youtube.com/embed/t66K_g-fkFY">Monique Fortuin</option> 
       <option value="https://www.youtube.com/embed/8DC-3DiVL4A">Erna Slangen</option> 
       <option value="https://www.youtube.com/embed/8Gvu_lgZZAM">Stephanie de Witte</option> 
      </select> 
      </label> 
     </form> 
     <br> 
     <br> 

     <iframe id="myIframe" src="http://www.alumnei.nl/images/learninglane.jpg" frameborder="0" marginwidth="0" marginheight="0" width="580" height="400" allowfullscreen scrolling="no"></iframe> 
     </body> 
     </html>

來源

2016-06-10 08:41:21

我趕緊檢查您的解決方案。它部分地做它需要做的事情。 iframe立即顯示今天的特定視頻推薦，這是確定的。但是，當我從下拉菜單中選擇其中一個視頻推薦內容時，已經存在的視頻推薦內容仍然存在，並且不會被選定的視頻推薦取代。期待任何解決此問題的建議。 –

hi KNVB，你做得很好。現在它完美的工作！非常感謝。我欠你一杯啤酒（雖然我自己不喝酒）;） –

只要給我打個勾8） –

我想這就是你以後

var current_date = new Date(), 
 
    number_of_day = current_date.getDay(); 
 

 
window.onload = function() { 
 
    setIframeSource(); 
 
} 
 

 
function setIframeSource() { 
 
    var theSelect = document.getElementById('location'); 
 
    var theIframe = document.getElementById('myIframe'); 
 
    var theUrl; 
 

 
    if (theSelect.selectedIndex > 0) { 
 
     theUrl = theSelect.options[theSelect.selectedIndex].value; 
 
    } else { 
 
     theUrl = theSelect.options[number_of_day].value; 
 
    } 
 
    theIframe.src = theUrl; 
 
}

div { \t \t \t \t \t 
 
\t font-family: Verdana; 
 
\t padding: 0px; 
 
    \t border: 0px solid #000000; \t \t 
 
} 
 
.txt3 { 
 
\t font-weight: normal; 
 
    \t font-size: 100%; 
 
\t font-weight: bold; 
 
\t font-family: Verdana; \t 
 
} 
 
.txt4 { 
 
\t font-weight: normal; 
 
    \t font-size: 100%; 
 
\t font-weight: bold; 
 
\t font-family: Verdana; \t 
 
    \t margin-top: 2px; \t \t 
 
    \t margin-left: 0px; 
 
    \t color:#000000; 
 
\t border: 2px solid #BC401E; 
 
}

<form id="form1" method="post"> 
 
\t <label class="txt3"> De video-testimonial van: <select class="txt4" id="location" onchange="setIframeSource()"> 
 
\t \t <option value="http://www.alumnei.nl/images/learninglane.jpg">... maak hier je keuze ...</option> 
 
\t \t <option value="https://www.youtube.com/embed/tP4i7CiMHh4">Monique van Neutegem</option> 
 
\t \t <option value="https://www.youtube.com/embed/Bx5Np1wIXYs">Marjon Heintjes</option> 
 
\t \t <option value="https://www.youtube.com/embed/J-NChlqVAgY">Els de Groot</option> 
 
\t \t <option value="https://www.youtube.com/embed/r_UB0rTH7SA">Arthur Alferink</option> 
 
\t \t <option value="https://www.youtube.com/embed/t66K_g-fkFY">Monique Fortuin</option> 
 
\t \t <option value="https://www.youtube.com/embed/8DC-3DiVL4A">Erna Slangen</option> 
 
\t \t <option value="https://www.youtube.com/embed/8Gvu_lgZZAM">Stephanie de Witte</option> 
 
\t </select></label> 
 
</form> 
 
<br><br> 
 

 
<iframe id="myIframe" src="http://www.alumnei.nl/images/learninglane.jpg" frameborder="0" marginwidth="0" marginheight="0" width="580" height="400" allowfullscreen scrolling="no"></iframe>

來源

2016-06-10 09:09:48 NICO

顯示下拉菜單選擇在IFRAME

回答

相關問題