Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mateussantiago333

Modificação em caixa de seleção

Recommended Posts

Olá, fiz esse código para uma caixa de seleção que direciona o link para uma nova guia:

 

<form name="link">
<select name="menu">
<option value="http://www.google.com.br">Google</option>
<option value="http://www.gmail.com">Gmail</option>
</select>
<input type="button" id="button"
onclick="window.open(document.link.menu.options[document.link.menu.selectedIndex].value);" value="GO" />
</form>
Gostaria de saber se tem como eu modificar esse código para agora ao selecionar uma opção, abaixo da caixa na mesma página aparecer um iframe com a opção escolhida.
Por exemplo este iframe do street view
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1spt-BR!2sbr!4v1430922524847!6m8!1m7!1s9TSTI4KqSUC17mq3UwKS4A!2m2!1d-15.799536!2d-47.864502!3f118.25926!4f0!5f0.7820865974627469" width="600" height="450" frameborder="0" style="border:0"></iframe>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Javscript

 

$( "#option" ).change(function() {
var select = $("#option").val();


$("#div").Html( "<iframe src='"+val+"'></iframe>" );


});
HTML

 

<form name="link">
 
    <select id="option" name="menu">
 
       <option value="http://www.google.com.br">Google</option>
 
       <option value="http://www.gmail.com">Gmail</option>
 
       </select> 
</form>
Isso?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui achar um código, mas ainda está meio bugado pois a primeira opção já está aparecendo e qndo se seleciona ela novamente o iframe não aparece, alguma ideia do que modificar?

 

<html>
<body>
<form name="change">
<SELECT NAME="options" ONCHANGE="document.getElementById('youriframe').src = this.options[this.selectedIndex].value">
<option>Aterro</option>
</SELECT>
<p>
<iframe name="iframe" id="youriframe" src="http://wikimapia.org/#lat=-14.768687&lon=-47.460938&z=4&l=&ifr=1&m=b&tag=2901" width="600" height="450" frameborder="0" style="border:0"></iframe>
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Abrir Options no iframe</title>
		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
		<script language="javascript" type="text/javascript">
			function jump(form) {
			var pagina_iframe=form.opcoes.selectedIndex
			if (form.opcoes.options[pagina_iframe].value != "0") 
			{
			window.open(form.opcoes.options[pagina_iframe].value, 
			target="iframe");
			}
			}
			//-->
		</script>
	</head>
	<body>

		<form name="paginas" action=url>
			<select name="opcoes" onchange="jump(this.form)">
				<option value="0">Selecione</option>   
				<option value="0"></option>
				<option value="http://globo.com/">Globo</option>
				<option value="http://tecmundo.com.br/">Tecmundo</option>
			</select>
		</form>

		<iframe src="" name="iframe" width="600" height="450" frameborder="0" style="border:0"></iframe>
		
	</body>
</html>

dá uma olhada ai!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.