Menu
I am able to change the source of an iframe very easily with a "button" click. But no matter what I try, I can't make the same happen with the use of a dropdown.
This works:
<html>
<body>
<a href="google.com" target="iframe">google</a>
<iframe name="iframe" src="yahoo.ca"></iframe>
</body>
</html>
But this does not:
<html>
<body>
<form name="change">
<select name="options" target="iframe">
<option><a href="google.com" target="iframe">google</a></option>
</select>
</form>
<iframe name="iframe" src="yahoo.ca"></iframe>
</body>
</html>
Any advice would be greatly appreciated. I found other posts similar, but all involved the use of arrays - which I don't believe I should need?
526
You need to use JavaScript
<html>
<body>
<form name="change">
<SELECT NAME="options" ONCHANGE="document.getElementById('youriframe').src = this.options[this.selectedIndex].value">
<option>choise</option>
<option value="http://microsoft.com">Microsoft</option>
</SELECT>
<iframe name="iframe" id="youriframe" src="yahoo.ca"></iframe>
</body>
</html>
Actually i needed to reload multiple iframes on dropdown change (3 different iframes on dropdwon choice), so i have ended up with this:
<html>
<head>
<script>
function setIframeSource() {
// behavior of myIframe
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('myIframe');
var theUrl;
theUrl = theSelect.options[theSelect.selectedIndex].value;
theIframe.src = theUrl;
// behavior of myIframe2
var theSelect2 = document.getElementById('location');
var theIframe2 = document.getElementById('myIframe2');
var theUrl2;
theUrl2 = theSelect2.options[theSelect2.selectedIndex].value;
theIframe2.src = theUrl2;
// behavior of myIframe3
var theSelect3 = document.getElementById('location');
var theIframe3 = document.getElementById('myIframe3');
var theUrl3;
theUrl3 = theSelect3.options[theSelect3.selectedIndex].value;
theIframe3.src = theUrl3;
}
</script>
</head>
<body>
<form id="form1" method="post">
<label> Selecione a rede</label>
<select id="location" onchange="setIframeSource()">
<option value="http://example.com/">Example.com</option>
<option value="https://www.dell.com/">DELL</option>
<option value="https://www.americanas.com.br/">AMERICANAS</option>
<option value="https://www.bbc.com/">BBC</option>
</select>
</form>
<iframe id="myIframe" src="http://example.com/" frameborder="0" marginwidth="0" marginheight="0" width="800" height="250"></iframe>
<br><br><hr/>
<iframe id="myIframe2" src="http://example.com/" frameborder="0" marginwidth="0" marginheight="0" width="800" height="250"></iframe>
<br><br><hr/>
<iframe id="myIframe3" src="http://example.com/" frameborder="0" marginwidth="0" marginheight="0" width="800" height="250"></iframe>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
