显示下拉菜单以选择iframe中的内容

时间:2016-06-10 07:39:06

标签: javascript html css iframe

请查看This Link

您会看到一个下拉菜单,您可以选择在iframe中显示7个可用的视频推荐之一。

请注意:目前,当您不进行选择时,可以看到显示“学习车道”上行走的人的标准图片。

如果某人没有做出选择,那么下拉菜单会显示“maak hier je keuze”,我希望将目前的图片自动替换为7个视频推荐中的一个,以便每周的每一天都自动7个视频推荐中的一个显示在iframe中。

提前感谢您对此提供任何帮助。 期待你的回复。

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

我到目前为止使用的代码如下:

function setIframeSource() {
   var theSelect = document.getElementById('location');
   var theIframe = document.getElementById('myIframe');
   var theUrl;
 
   theUrl = theSelect.options[theSelect.selectedIndex].value;
   theIframe.src = theUrl;
}
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;
}
<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>

2 个答案:

答案 0 :(得分:0)

应该是你的需要。

CASE away_idx
               WHEN num_teams + num_fake - 1
               THEN away_idx
               ELSE MOD( away_idx + 1, num_teams + num_fake - 1 )
               END

答案 1 :(得分:0)

我认为这是你之后的事情

&#13;
&#13;
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;
}
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;