通过选择框选项更改Iframe SRC

Question

I would like to know, how can we change the SRC url for IFRAME through select box.

we have a following code.

HTML CODE

<select name="sign" size="1">
<option value="-1" selected="selected">Select Signature</option><option value="4ff42886$1$YT2.BF2.$241VJYgpUpWPD7p1Wjq5E1">Link Building India</option> 
</select>

IFRAME CODE

<iframe name="iframe2" src="signature.php?sign=" align="top" height="100%" width="95%" hspace="10" vspace="10" align="middle"></iframe>

I just want to update the src of Iframe2 according to the value of Select box like this

Final code for IFRAME That to be change according to the select box.

<iframe name="iframe2" src="signature.php?sign=4ff42886$1$YT2.BF2.$241VJYgpUpWPD7p1Wjq5E1" align="top" height="100%" width="95%" hspace="10" vspace="10" align="middle"></iframe>

Thanks

Gun

Answer 1

$("select").change(function(){ // put a ID to select tag
  var url = "signature.php?sign="+$(this).val();

  $("iframe").attr("src",url); 

});

Answer 2

You can have a template and use that to re-render your iframe each time? You can do that since you know the parent the iframe resides in, right?

Something like..

var iframeHTMLTemplate = '<iframe ... name="blah" src="@src" />

And while appending to DOM..

$("select").change(function(){ // put a ID to select tag
  var url = "signature.php?sign="+$(this).val();

  var myIframe = $(iframeHTMLTemplate.replace('@src', url));

  container.append(myIframe);

});