Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Mudar opções de um select a partir de outro

09-05-2007 15:12

Vou passar abaixo um código detalhado de como mudar as opções de um select a partir de outro.

Usarei 2 selects, números e letras.

Quando no 1º select o número escolhido for 1, mostra OPÇÃO 1
Quando no 1º select o número escolhido for 2, mostra OPÇÃO 2

Obs.: Fica meio complicado explicar o passo a passo do funcionamento desse sistema por aqui, mas, dê uma estudada no exemplo que mais será necessário para você. Tendo dúvida é só postar.

<script> function troca(n,i) {   // esvazia letras quando numeros estiver vazio if(n=="numeros" && i=="vazio") { document.forms['form'].letras.options.length = 0; document.forms['form'].letras.options[0] = new Option('Escolha',''); }   //// 1º SELECT PREENCHE 2º SELECT ////   // OPÇÃO 1 // if(n=="numeros" && i=="1") { document.forms['form'].letras.options[0] = new Option('clique','vazio'); document.forms['form'].letras.options[1] = new Option('letra a','letra a'); document.forms['form'].letras.options[2] = new Option('letra b','letra b'); }   // OPÇÃO 2 // if(n=="numeros" && i=="2") { document.forms['form'].letras.options[0] = new Option('clique','vazio'); document.forms['form'].letras.options[1] = new Option('letra c','letra c'); document.forms['form'].letras.options[2] = new Option('letra d','letra d'); }   } </script>


<form name="form" action="" method="POST">   select 1 (números): <select name="numeros" onChange="troca('numeros',this.value)"> <option value="vazio" selected>escolha</option> <option value="1">1</option> <option value="2">2</option> </select>   select 2 (letras): <select name="letras" onChange="troca('letras',this.value)"> <option value="" selected>escolha</option> </select>   </form>

Agora algo mais complexo, 3 selects :o

<script> function troca(n,i) {   var select1 = document.form.select1;   // esvazia numeros if(n=="numeros" && i=="vazio") { document.forms['form'].letras.options.length = 0; document.forms['form'].letras.options[0] = new Option('Escolha',''); }   // esvazia letras if(n=="letras" && i=="vazio") { document.forms['form'].outros.options.length = 0; document.forms['form'].outros.options[0] = new Option('Escolha',''); }   //// 1º SELECT PREENCHE 2º SELECT ////   // OPÇÃO 1 // if(n=="numeros" && i=="1") { document.forms['form'].letras.options[0] = new Option('clique','vazio'); document.forms['form'].letras.options[1] = new Option('letra a','letra a'); document.forms['form'].letras.options[2] = new Option('letra b','letra b'); }   // OPÇÃO 2 // if(n=="numeros" && i=="2") { document.forms['form'].letras.options[0] = new Option('clique','vazio'); document.forms['form'].letras.options[1] = new Option('letra c','letra c'); document.forms['form'].letras.options[2] = new Option('letra d','letra d'); }     //// 2º SELECT PREENCHE TERCEIRO SELECT ////   // letra a (2º select) // if(n=="letras" && i=="letra a") { document.forms['form'].outros.options[0] = new Option('clique','vazio'); document.forms['form'].outros.options[1] = new Option('amarelo','amarelo'); document.forms['form'].outros.options[2] = new Option('azul','azul'); }   // letra b (2º select) // if(n=="letras" && i=="letra b") { document.forms['form'].outros.options[0] = new Option('clique','vazio'); document.forms['form'].outros.options[1] = new Option('branco','branco'); document.forms['form'].outros.options[2] = new Option('bege','bege'); }   // letra c (2º select) // if(n=="letras" && i=="letra c") { document.forms['form'].outros.options[0] = new Option('clique','vazio'); document.forms['form'].outros.options[1] = new Option('cinza','cinza'); document.forms['form'].outros.options[2] = new Option('creme','creme'); }   // letra d (2º select) // if(n=="letras" && i=="letra d") { document.forms['form'].outros.options[0] = new Option('clique','vazio'); document.forms['form'].outros.options[1] = new Option('damasco','damasco'); }   } </script>


<form name="form" action="" method="POST">   select 1 (números): <select name="numeros" onChange="troca('numeros',this.value)"> <option value="vazio" selected>escolha</option> <option value="1">1</option> <option value="2">2</option> </select>   select 2 (letras): <select name="letras" onChange="troca('letras',this.value)"> <option value="" selected>escolha</option> </select>   select 3 (cores): <select name="outros"> <option value="" selected>escolha</option> </select>   </form>

1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado