显示下拉菜单选择在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

回答

相关问题