Active list for other in Javascript

Asked

Viewed 84 times

0

I am trying to make a list work, that if an option in the first "select box" is selected, the other "select box" appears. But it’s not working.

At first the codes are right. Can anyone tell me what’s going on?

Follows the code

First Select Box:

<select id="eassociado" name="eassociado" required>
 <option disabled selected value> -- Selecione uma opção -- </option>
  <option class="lista">ABRAPP</option>
  <option class="lista">ABAAI</option>
  <option class="lista">IBGC</option>
  <option class="lista">ABRACAM</option>
  <option class="lista">ABBC</option>

 </select>

Second Select Box

        <select name="ingresso" id="chkveg" required>

        <option  class="associadoEntidade" value="https://pag.ae/7ULKQLB9m">Associados Entidades Apoiadoras + C.Dados = R$940,00</option>

        <option  class="associadoEntidade" value="https://pag.ae/7ULKQZk-m">Associados Entidades Apoiadoras Normal = R$1.125,00</option>

        </select>

Javascript:

    var lista = document.querySelectorAll(".lista");

var associadoEntidade = document.querySelectorAll(".associadoEntidade");
console.log(associadoEntidade);

for(var i = 0; i < associadoEntidade.length; i++){

       associadoEntidade[i].style.display = "none"; 
    }

if (lista.selected==true){

        associadoEntidade[i].style.display = "block"; 

}
javascript html css

1 answer

1


You can do this with the example below:

var eassociado = document.getElementById('eassociado');
var chkveg = document.getElementById('chkveg');

chkveg.style.display = 'none';

eassociado.addEventListener('change', function() {
  var escolhido = eassociado.options[eassociado.selectedIndex].index;
  
  
  if(escolhido == 1) {
    chkveg.style.display = 'inline-block';
    var um = chkveg.selectedIndex = 0;
    chkveg.options[1].style.display = 'none';
  }
  else if(escolhido == 2) {
    chkveg.style.display = 'inline-block';
    var dois = chkveg.selectedIndex = 1;
    chkveg.options[0].style.display = 'none';
  } // Asssim por diante
  else chkveg.style.display = 'none';
});
<select id="eassociado" name="eassociado" required>
  <option disabled selected value> -- Selecione uma opção -- </option>
  <option class="lista">ABRAPP</option>
  <option class="lista">ABAAI</option>
  <option class="lista">IBGC</option>
  <option class="lista">ABRACAM</option>
  <option class="lista">ABBC</option>
</select>

<select name="ingresso" id="chkveg" required>
  <option class="associadoEntidade" value="https://pag.ae/7ULKQLB9m">Associados Entidades Apoiadoras + C.Dados = R$940,00</option>
  <option class="associadoEntidade" value="https://pag.ae/7ULKQZk-m">Associados Entidades Apoiadoras Normal = R$1.125,00</option>
</select>

  • hi buddy, thank you very much for the answer, but not quite what I need, I would like that when IBGC(for example) is selected in the first droplist, the Associate Entities Support.... that is in the second field appeared. And so with others, understand?

  • I understood, but, what would be the relation of this, because in the first select has 6 options and the second has 2, what would be the relationship?

  • I put only 2 here to better understand, but in my code there are more

  • I edited the answer, making a basic example, doing each check.

  • is about that, but as I hide one or more option from the second select?

  • Face then you don’t want a select, ever seen some select with only one option??!

  • want like this, (for example) if I select ABRAPP, hide Associates Supporting Entities Normal = R$1.125,00, I know I have to put something inside the if of your code, but I don’t know what to do

  • You have tried several times to explain what you want and I understand less and less, up there in the question you say that if an option in the first "select box" is selected, the other "select box" appears such an option now you already want me to hide. Not buying what you really want to do.

  • yes, I rephrased the question in a slightly wrong way, but for example that you wrote, I saw that it is easier to hide using some code inside that if

  • tried if(chosen == 1) { chkveg.style.display = 'inline-block'; var a = chkveg.selectedIndex = 1; a.style.display = 'None'; } , but returns variable anonymity

  • I think I understand what you wanted, I edited the answer.

  • Show, it worked, the code got huge, I think I could reduce a lot if I understood more of js, https://jsfiddle.net/ves2b5ag/1/

  • It’s the right thing to do for and instead of taking the options by number pick by the for index. But that would make the code much more complex. However you can ask a new question with the code you already have and get help to decrease it.

  • That code, it didn’t work on the iPad, you can tell me why?

Show 9 more comments

Browser other questions tagged javascript html css

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