2 Select onchange com texto usando HTML

[caiozim 0]

Olá

 

Eu queria criar um select que ao selecionar uma opção, abilitasse outro select e de acordo com esta nova opção um texto seria mostrado.

Será que teria como criar isso apenas usando html ?

 

 

Se alguém já tiver algo parecido me passe para dar uma olhada e analisar.

 

Obrigado

[Thiago Retondar 18]

Tópico movido:

 

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript / DHTML

[Matheus Tavares 167]

Serve em jQuery?

Eu criaria assim:

 

$('#id_do_select').change(function() {
  var valor = $('#id_do_select option:selected').text();
  if (valor==1) {
    $('#div_alvo').html('<select name="outroselect" id="outroselect"><option value="1">Testiiiiiii</option></select>');
  } else {
    $('#div_alvo').html('<select name="outroselect" id="outroselect"><option value="1">Testeeeeeee</option></select>');
  }
  $('#outroselect').change(function() {
    var valorx = $('#outroselect option:selected').text();
    //$('#div_do_texto').append();  // Comentei estas linhas
    //$('#div_do_texto').after();   // Para exemplificar
    //$('#div_do_texto').before();  // as diferentes funções que
    //$('#div_do_texto').text();    // você pode usar :)
    $('#div_do_texto').html('TEXTO INSERIDO COM SUCESSO! VOCE ESCOLHEU A OPCAO: '+valor+' E A SUBOPCAO: '+valorx);
  });
});

A funcao tá simples, fiz sem testar e na correria, mas a idéia é essa. Caso não funcione, você pode tambem tentar utilizar a funcao live na criacao dos objetos; e ainda pode usar funcoes como $.get, $.ajax e $.post para receber o select / texto dinamicos, podendo fazer consultas no servidor antes de serem exibidos.

Não é muito dificil nao.

 

Abraços, sucesso.

[klonder 14]

O código abaixo dar-lhe-á uma idéia de como fazer algo semelhante:

<script type="text/javascript">

function verificar() {
objOpcoes1 = document.getElementById("opcoes1");
objOpcoes2 = document.getElementById("opcoes2");
objTexto1 = document.getElementById("texto1");

	if (objOpcoes1.value == "sim") {
		objOpcoes2.style.display = "block";	
	} else {
		objOpcoes2.style.display = "none";
		objTexto1.style.display = "none";	
	}
}

function verificar2() {
objOpcoes2 = document.getElementById("opcoes2");
objLing = document.getElementById("linguagem");
objTexto1 = document.getElementById("texto1");

	if (objLing.value != "") {
		objTexto1.style.display = "block";	
	} else {
		objTexto1.style.display = "none";	
	}
}
</script>


<form>
Você gosta de criar sites? <select id="opcoes1" onchange="verificar()">
<option value=""></option>
<option value="sim">Sim</option>
<option value="nao">Não</option>
</select>
<br><br>
<span id="opcoes2" style="display:none">
Você desenvolve melhor em qual linguagem? <select id="linguagem" onchange="verificar2()">
<option value=""></option>
<option value="asp">ASP</option>
<option value="html">HTML</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
</select></span>

<br><br><span id="texto1" style="display:none"> Fale mais sobre essa linguagem: <input type="text" name="comentario"></span>
</form>

[caiozim 0]

Olá !

 

Muito obrigado pelas respostas ... fiz alguns testes mas não atingi exatamente o que eu queria.

 

Vou dar um exemplo para ser mais claro

 

Numa pesquisa qualquer, crio um select de Estados Brasileiros. Quando algum estado for escolhido, um novo select será abilitado com as Cidades daquele estado escolhido. Se o usuário escolher alguma cidade, o dado de número de habitantes será fornecido.