Open div according to combo selection

Asked

Viewed 118 times

0

Need to include lines in a table with textbox fields according to combo selection.

x is that if the user selects in the Employees = 2 combo, it must display the textbox Name 1 and Name 2, if you select Employees = 3, display the lines Name 1, Name 2 and Name 3, and so on, up to the limit of 5.

I saw some posts but always show 1 to 1 (as: Show hidden div according to the value of a Dropdown)

1 answer

1


    $(document).ready(function(){
    //Chama o evento após selecionar um valor
    $('#DropEmpregados').on('change', function() {
    //Verifica a numeração do select no dropdown
      if ( this.value == '2')
      {
            $("#divNome1").show();
        $("#divNome2").show();
      } 
      else if( this.value == '3')
      {
          $("#divNome1").show();
          $("#divNome2").show();
          $("#divNome3").show();
      }
      else if (this.value == '4')
     {
          $("#divNome1").show();
          $("#divNome2").show();
          $("#divNome3").show();
          $("#divNome4").show();
     }
      else if (this.value == '5')
    {
          $("#divNome1").show();
          $("#divNome2").show();
          $("#divNome3").show();
          $("#divNome4").show();
          $("#divNome5").show();
    }
        //Se não for nenhuma das alternativas ele esconde todas
        else{
             $("#divNome1").hide();
             $("#divNome2").hide();
             $("#divNome3").hide();
             $("#divNome4").hide();
             $("#divNome5").hide();
        }
    });
});

From what I understand and based on the logic of the link example, would that be it? It can be done using the css script in several ways... But I think that example you gave the link already left you in the goal face. Give a return and further clarification on this doubt if it is certainly not this

  • Daniel, That’s the idea! But I’m having trouble making it work, because all the lines with the name are showing up and nothing is missing. I tried?

  • @mmooser try to use DOM in style, it might help you. For example: Document.getElementById("Editarclasse").style.display = "None"

  • @mmooser If you can post your code, it will be better to simulate your situation here :)

  • I did it! I had to turn the entire table into div, because the commands related to Hide and show do not work with table (table, tr, td). Thank you very much!

  • @mmooser I’m glad I can help, you’re welcome! D

Browser other questions tagged

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