Change iframe src onchange of dropdown value

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?

标签： html iframe drop-down-menu src

3条回答

够拽才男人

2楼-- · 2020-07-17 17:06

i have used this reference and another one, and came with this working example:

<html>
<head>
    <script type="text/javascript">
        function setIframeSource() {
            var theSelect = document.getElementById('location');
            var theIframe = document.getElementById('myIframe');
            var theUrl;

            theUrl = theSelect.options[theSelect.selectedIndex].value;
            theIframe.src = theUrl;
        }
    </script>
</head>
<body>
<form id="form1" method="post">
   <label> Selecione a rede</label>

    <select id="location" onchange="setIframeSource()"> 
      <option value="https://www.dell.com/">CNN</option> 
      <option value="https://www.americanas.com.br/">AMERICANAS</option> 
      <option value="https://www.bbc.com/">BBC</option> 
   </select>
</form>

<iframe id="myIframe" src="https://www.bbc.com/" frameborder="0" marginwidth="0" marginheight="0" width="800" height="400"></iframe>

</body>
</html>

0人赞添加讨论(0) 举报

走好不送

3楼-- · 2020-07-17 17:15

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>

0人赞添加讨论(0) 举报

Root（大扎）

4楼-- · 2020-07-17 17:19

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>

0人赞添加讨论(0) 举报

Change iframe src onchange of dropdown value

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间