Ir para conteúdo

POWERED BY:

Arquivado

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

Fernando José

[Resolvido] Determinada option do select carregar outro select

Por , em Javascript

Recommended Posts

Fernando José    0

Fernando José
Postado

Galera,

 

Tenho 4 select em uma página. Quando o usuário preencher o segundo select com a opção XXXX que é ID = 6 preciso habilitar o 4 select.

 

Como posso fazer isso? Pensei em algo assim, mas dai perco o que foi preenchido nos outros select.

 

function exibeSelect4(opcao)
{
    if(opcao == 6)
    {
         location.href = "./?select2="+opcao;	
    }
}

Podem me ajudar?

 

Grato.

 

Tentei com Jquerym, mas não consegui:

 

<script language="javascript" type="text/javascript">   
$(document).ready(function() {    
	document.getElementById('div2').style.display='none';
}); 
function event2()
{
   document.getElementById('div2').style.display='block';
}
</script>

Select que carrega o outro:

<select name="job" id="job" class="input"> 
    <option>Selecione:</option>
    <option value="3" >JORNAL</option> 
    <option value="6" onclick="event2()">PROJETO ESPECIAL</option> 
    <option value="2" >REVISTA</optin>
</select>

Área que quero liberar:

<select name="especificacao_2" id="especificacao2"> 
    <option>Selecione:</option> 
    <option value="2">OPCAO 02</option> 
    <option value="1">OPCAO 01</option> 
</select>

O que estou fazendo errado?

 

No Firefox está funcionando!

 

No Internet Explorer não funciona!

 

No Google Chrome não funciona!

 

Porque será?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

exemplo:

<html>
<head>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
window.onload = function()
{
	id('job').onchange = function()
	{
		id('especificacao2').style.display = this.value==6 ? 'block' : 'none';
	}
}
</script>
</head>
<body>
	<form action="" method="post">
		<select name="job" id="job" class="input"> 
			<option value="0">Selecione:</option>
			<option value="3">JORNAL</option> 
			<option value="6">PROJETO ESPECIAL</option> 
			<option value="2">REVISTA</option>
		</select> 
		<select name="especificacao2" id="especificacao2" style="display: none;">
			<option value="0">Selecione:</option>
			<option value="2">OPCAO 02</option> 
			<option value="1">OPCAO 01</option> 
		</select>
	</form>
</body>
</html>
, não é 'funcional' disparar eventos no onclick dos options.. para <select>s dispare no onchange deles.

se você for usar mesmo jQuery, dê uma boa estudada.. pois teu script pode ser muito melhorado, e você nem aproveitou o melhor do fw

Compartilhar este post

Link para o post
Compartilhar em outros sites

mauelement    0

mauelement
Postado

Vê se serve pra você... crtz ñ deve ser o mais ideal, deve haver alguma forma de otimizar, mas como estou aprendendo, resolvei pegar seu caso pra estudar.... abrç

 

segue:

 

	$(document).ready(function(){
	$("#ford , #bmw").hide()
	
	
	$("#fabricante").change(
	function(){

		var valor = $("option:selected", this).val();
		
			switch(valor){
			case 'ford':
			$('select:not("#fabricante")').hide();
			$("#ford").show();			
			break;
			
			case 'bmw':
			$('select:not("#fabricante")').hide();
			$("#bmw").show();			
			break;
			
	});
	});

 

}

<select id="fabricante">
   <option value="selecione"> selecione a marca </option>
   <option value="ford"> Ford </option>
<option value="bmw"> BMW </option>
</select>

<select id="ford">
<option value="KA"> KA </option>
   <option value="Fiesta"> Fiesta </option>
<option value="Focus"> Focus </option>
<option value="Range"> Range </option>
<option value="ScoSport"> EcoSport </option>
</select>

<select id="bmw">
<option value="120i"> 120i </option>
   <option value="130i"> 130i </option>
<option value="330i"> 330i </option>
<option value="330iA"> 330iA </option>
<option value="z4"> z4 </option>
</select>

 

flw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fernando José    0

Fernando José
Postado

Muito obrigado, resolvi com o seu exemplo:

 

<script language="javascript" type="text/javascript">   
$(document).ready(function(){
        $("#div2").hide()
		$("#job").change(
        function(){

                var valor = $("option:selected", this).val();
                
                        if(valor == '6'){
                        	$("#div2").show();                      
						}
						else{
							$("#div2").hide();  
						}
                        
        });
});
</script>'

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito