2016-06-10 9 views
0

Пожалуйста, посмотри на This LinkПоказать выпадающее меню для выбора содержимого в IFRAME

Вы увидите выпадающее меню, которое дает вам возможность показать одну из 7 доступных видео-отзывов в IFRAME.

Обратите внимание: в настоящее время, когда вы не делаете выбор, отображается стандартная фотография, показывающая людей, идущих по «устной дорожке».

Если кто-то не делает выбор, поэтому выпадающий список «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>

ответ

0

это должно быть то, что ваш необходимость.

<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> 
+0

Я быстро проверил свое решение. Он частично выполняет то, что ему нужно делать. В iframe сразу отображается конкретная видео-рекомендация на сегодня, и это нормально. Однако, когда я выбираю один из других видео-отзывов из выпадающего меню, уже присутствующий видео-отзыв, остается и не заменяется выбранным видео-отзывом. С надеждой на любое предложение по его устранению. –

+0

hi KNVB, Вы проделали отличную работу. Теперь он отлично работает !!! Большое спасибо. Я должен тебе пиво (хотя я сам не пью алкоголь ;-)) –

+0

Просто дайте мне галочку 8) –

0

Я думаю, что это то, что вы после

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>

Смежные вопросы