How to show and hide options according to the form selection?

Question

How to show and hide options according to the form selection?

Navigation

#1 by (0 votes)

0

I am creating a website where I will run a script that shows a list of options according to the user's 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" , it was a <select> .

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

javascript

asked by anonymous 19.02.2018 / 14:55

1 answer

View data is disappearing in a certain time The contents of the array are not being printed, but the reference to the object [duplicate]

score 0 · Answer 1

Just swap 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 as radios had when clicked.