(Resolvido) Ocultar options de um select ao selecionar um botão tipo r

Levi_gns · Maio 29, 2009

Boa tarde a todos... Sou novo por aqui, estou postando pela primeira vez.

Meu problema é o seguinte:

Num formulário tenho um grupo de botões tipo radio com nome "tipo", e outro grupo de botões tipo radio (pode ser caixa de seleção também) com nome "subtipo", como segue abaixo.

<form>

</form>

ou ainda

</select>

</form>

Ao selecionar algum botão "tipo", gostaria de poder ocultar alguns valores do "subtipotipo".

Exemplo:

tipo.value = 1 selecionado => ocultar subtipo.value = a, ocultar subtipo.value = d, e exibir o resto;

tipo.value = 2 selecionado => ocultar subtipo.value = a, ocultar subtipo.value = c, e exibir o resto;

tipo.value = 3 selecionado => ocultar subtipo.value = b, ocultar subtipo.value = c, e exibir o resto;

Alguém poderia me dar um exemplo prático de como eu posso fazer isso em JavaScript?

Vlw.

Editado Maio 30, 2009 por Levi_gns

Levi_gns · Maio 30, 2009

achei o que estava buscando... segue abaixo o código, caso haja interesse de alguém:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Select dinâmico</title>
    
    <script type="text/javascript">
       numero_lista = new Array("1", "2", "3");
       cardinal_lista = new Array("Primeiro", "Segundo", "Terceiro");

     function trocarSelect(formulario_nome, select_nome, lista_nome)
      {
          if (lista_nome == "numero") {
              var lista = numero_lista;
          } else {
              var lista = cardinal_lista;
          }

          var select_alvo = document.forms[formulario_nome][select_nome];   
          select_alvo.options.length = 0;
          for (i = 0; i <lista.length; i++) {
              var nome_opcao = lista[i];
              select_alvo.options[i] = new Option(nome_opcao);
          }
      }
    </script>
  </head>
  
  <body>
    <form name="formulario_de_exemplo" method="post" action="">
  <p>
        <input type="radio" name="exemplo" value="numero" onClick="trocarSelect('formulario_de_exemplo', 'selecao', 'numero');" /> número
        <input type="radio" name="exemplo" value="cardinal" onClick="trocarSelect('formulario_de_exemplo', 'selecao', 'cardinal');" /> cardinal.
      <br />
    <select name="selecao">
       <option value="vazio">Clique em um botão radio qualquer</option>
    </select>
      </p>
    </form>
</body>
</html>

Editado Maio 30, 2009 por Jonathan Queiroz
Adcionar tag's (Jonathan)

Levi_gns · Maio 30, 2009

A prática da sua utilidade rsrs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Select dinâmico</title>
    
    &lt;script type="text/javascript">
      residencial_lista = new Array("Casa", "Apartamento", "kitchenette/conjugados", "Flat", "Loft", "Terreno");
                  comercial_lista = new Array("Casa", "Apartamento", "kitchenette/conjugados", "Box/garagem", "Cj. comercial/sala", "Galpão/depósito/armazém", "Terreno");
      rural_lista = new Array("Chácara", "Sítio", "Fazenda", "Terreno");
      lazer_lista = new Array("Casa", "Apartamento", "kitchenette/conjugados", "Flat", "Loft", "Pousada");
      
     function inicio(formulario_nome, select_nome, lista_nome) {
        var select_alvo = document.forms[formulario_nome][select_nome]; 
        var lista = residencial_lista; 
        select_alvo.options.length = 0;
        for (i = 0; i <lista.length; i++) {
            var nome_opcao = lista[i];
            select_alvo.options[i] = new Option(nome_opcao);
        }
     }
     
     function trocarSelect(formulario_nome, select_nome, lista_nome) {
        if (lista_nome == "residencial") {
            var lista = residencial_lista;
        }

        if (lista_nome == "comercial") {
            var lista = comercial_lista;
        }
      
        if (lista_nome == "rural") {
            var lista = rural_lista;
        }
          
        if (lista_nome == "lazer") {
            var lista = lazer_lista;
        }
          
        var select_alvo = document.forms[formulario_nome][select_nome];   
        select_alvo.options.length = 0;
        for (i = 0; i <lista.length; i++) {
            var nome_opcao = lista[i];
            select_alvo.options[i] = new Option(nome_opcao);
        }
    }
    </script>
  </head>
  
  <body onload="inicio('formimoveis', 'selecao', 'residencial')">
    <form name="formimoveis" method="post" action="">
  <p>
        
        <input name="tipo" type="radio" value="Residencial" onClick="trocarSelect('formimoveis', 'selecao', 'residencial');" checked /> Residencial
        <input type="radio" name="tipo" value="Comercial" onClick="trocarSelect('formimoveis', 'selecao', 'comercial');" /> Comercial
        <input type="radio" name="tipo" value="Rural" onClick="trocarSelect('formimoveis', 'selecao', 'rural');" /> Rural
        <input type="radio" name="tipo" value="Lazer" onClick="trocarSelect('formimoveis', 'selecao', 'lazer');" /> Lazer
      <br />
    <select name="selecao">
       <option value=""></option>
    </select>
      </p>
    </form>
</body>
</html>

Agora só falta inserir esses dados no banco... Logo estarei fazendo teste, se falhar volto a pedir socorro.

[]s

Entrar

(Resolvido) Ocultar options de um select ao selecionar um botão tipo r

Pergunta

Levi_gns

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Levi_gns

Link para o comentário

Compartilhar em outros sites

Levi_gns

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades