Show div/form when user selects an option

Question

I would like when the person chooses one of the select options to appear the form as the code says. And also that when a form appeared the other was with display None.

$(document).ready(function() {
  document.getElementById('test').addEventListener('change', function () {

	if (this.value == 2) {
		var style = this.value == 2 ? 'block' : 'none';
		document.getElementById('formContato').style.display = style;
	}; else if (this.value == 3) {
			var style = this.value == 3 ? 'block' : 'none'
			document.getElementById('formRevenda').style.display = style;
		}; else (this.value == 4){
				var style = this.value == 4 ? 'block' : 'none';
				document.getElementById('formCliente').style.display = style;
			};
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assunto c-form">
  <label class="lado">
			<select class="text" id="test">
			<option id="trabalhe" value="1">Trabalhe conosco</option>
			<option id="sugestoes" value="2">Sugestões/Reclamações</option>
			<option id="revendas" value="3">Cadastro de Revendas</option>
		  <option id="clientes" value="4">Cadastro de clientes</option>
	  </select>
  </label>
</div>

<form id="formContato" style="display: none;">
  <input type="text">
</form>
 
<form id="formRevenda" style="display: none;">
  <input type="text">
</form>

<form id="formCliente" style="display: none;">
  <input type="text">
</form>

Answer 1

If you use jQuery, use it in the whole code. And you can simplify your code this way:

$(document).ready(function() {
   $('#test').on('change', function () {

      $('option', this).show(); // mostra todos os options
      $('form').hide(); // oculta todos os forms
      $('option:selected', this).hide(); // oculta o option selecionado

      var v = $(this).val(); // pega o valor do option selecionado

      if (v == 2) {
         var id_form = '#formContato';
      }else if(v == 3){
         var id_form = '#formRevenda';
      }else if(v == 4){
         var id_form = '#formCliente';
      }

      $(id_form).show(); // mostra o form de acordo com o valor dos ifs acima
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assunto c-form">
  <label class="lado">
			<select class="text" id="test">
			<option id="trabalhe" value="1">Trabalhe conosco</option>
			<option id="sugestoes" value="2">Sugestões/Reclamações</option>
			<option id="revendas" value="3">Cadastro de Revendas</option>
		  <option id="clientes" value="4">Cadastro de clientes</option>
	  </select>
  </label>
</div>

<form id="formContato" style="display: none;">
   Contato
  <input type="text">
</form>
 
<form id="formRevenda" style="display: none;">
   Revenda
  <input type="text">
</form>

<form id="formCliente" style="display: none;">
   Cliente
  <input type="text">
</form>

Answer 2

Javascript

function showDiv(elem){
  if(elem.value == 1){
      document.getElementById('formContato').style.display = "none";
      document.getElementById('formRevenda').style.display = "none";
      document.getElementById('formCliente').style.display = "none";
  } else if (elem.value == 2) { 
      document.getElementById('formContato').style.display = "block";
      document.getElementById('formRevenda').style.display = "none";
      document.getElementById('formCliente').style.display = "none";
  } else if (elem.value == 3) {
      document.getElementById('formRevenda').style.display = "block";
      document.getElementById('formCliente').style.display = "none";
      document.getElementById('formContato').style.display = "none";
  } else if (elem.value == 4) {
      document.getElementById('formCliente').style.display = "block";
      document.getElementById('formRevenda').style.display = "none";
      document.getElementById('formContato').style.display = "none";
  }

}

<div class="assunto c-form">
  <label class="lado">
			<select class="text" id="test" onchange="showDiv(this)">
			<option id="trabalhe" value="1">Trabalhe conosco</option>
			<option id="sugestoes" value="2">Sugestões/Reclamações</option>
			<option id="revendas" value="3">Cadastro de Revendas</option>
		  <option id="clientes" value="4">Cadastro de clientes</option>
	  </select>
  </label>
</div>

<form id="formContato" style="display: none;">
  <input type="text" placeholder="formContato">
</form>
 
<form id="formRevenda" style="display: none;">
  <input type="text" placeholder="formRevenda">
</form>

<form id="formCliente" style="display: none;">
  <input type="text" placeholder="formCliente">
</form>

Javascript itself says it all, in jquery there are explanatory comments

Jquery

//ao selecionar um option
$("#test").change(function() {
    //esconde todos os forms cujo valor do id contenha "form"
    $('form[id^="form"]').hide(); 
    //pega o id do option selecionado
    var id = $(this).children(":selected").attr("id");
    //concatena o id acima com "form" para mostrar o form com esse id
    $("#form"+id).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assunto c-form">
      <label class="lado">
    			<select class="text" id="test">
    			<option id="trabalhe" value="1">Trabalhe conosco</option>
    			<option id="sugestoes" value="2">Sugestões/Reclamações</option>
    			<option id="revendas" value="3">Cadastro de Revendas</option>
    		  <option id="clientes" value="4">Cadastro de clientes</option>
    	  </select>
      </label>
    </div>

    <form id="formsugestoes" style="display: none;">
      <input type="text" placeholder="formContato">
    </form>
     
    <form id="formrevendas" style="display: none;">
      <input type="text" placeholder="formRevenda">
    </form>

    <form id="formclientes" style="display: none;">
      <input type="text" placeholder="formCliente">
    </form>

NOTE: the ids of the Forms have been renamed

Answer 3

Instead:

  $(document).ready(function() {
      document.getElementById('test').addEventListener('change', function () {

        if (this.value == 2) {
            var style = this.value == 2 ? 'block' : 'none';
            document.getElementById('formContato').style.display = style;
        }; else if (this.value == 3) {
                var style = this.value == 3 ? 'block' : 'none'
                document.getElementById('formRevenda').style.display = style;
            }; else (this.value == 4){
                    var style = this.value == 4 ? 'block' : 'none';
                    document.getElementById('formCliente').style.display = style;
                };
    });

Try:

$( "#test" ).change(function() {
  //Ações
});

Answer 4

Creates a class to add the display block when inserted into the element, and leaves everyone with display None, when if you test, you remove class from all elements and ad only in the element you want.