How to show and hide options as you select the form?

Asked

Viewed 25 times

0

I am creating a website where I will run a script that shows a list of options as user selection.

Searching the internet I found this script:

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);
  }
}
<body onload="inicio('formimoveis', 'selecao', 'residencial')">
  <form name="formimoveis" method="post" action="">
    <input type="radio" name="tipo" 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>
  </form>
</body>

It would be perfect if instead of the input field type="radio" were a <select>.

What changes do I have to make to make that change?

javascript form

1 answer

0

Just change the radios for this select:

<select onchange="trocarSelect('formimoveis', 'selecao', this.value);">
   <option value="residencial">Residencial</option>
   <option value="comercial">Comercial</option>
   <option value="rural">Rural</option>
   <option value="lazer">Lazer</option>
</select>

It will have the same effect on onchange that the radios had to be clicked..

Browser other questions tagged javascript form

You are not signed in. Login or sign up in order to post.