4

Tenho uma select, e consoante a escolha dessa mesmo select, vai ser mostrado um formulário para inserir um contacto. Tenho que ter em atenção que a primeira opção da select já tem o formulário a ser mostrado por defeito, ou seja, o utilizador quando abre a página aparece logo o formulário empresa. Tenho o seguinte:

<select name="id_tipo_contacto" id="id_tipo_contacto">
    <option value="1">Contacto empresa</option>
    <option value="2">Contacto casamento</option>
</select>

<div id="empresa" style="display:none;">
      Mostra formulário empresa
</div>

<div id="casamento" style="display:none;">
      Mostra formulário casamento
</div>

2 Respostas 2

5

A melhor solução é dar uma classe a essas divs que têm formulários para as poder selecionar. Depois, dê o nome da ID de cada div ao value da option no select.

Exemplo:

<select name="id_tipo_contacto" id="id_tipo_contacto">
    <option value="empresa">Contacto empresa</option>
    <option value="casamento">Contacto casamento</option>
</select>
<div id="empresa" class="formulario">Mostra formulário empresa</div>
<div id="casamento" class="formulario" style="display:none;">Mostra formulário casamento</div>

Assim só precisa de fazer assim, usando JS puro: http://jsfiddle.net/c4hyM/

var select = document.getElementById("id_tipo_contacto");
var formularios = document.querySelectorAll('.formulario');

select.onchange = function () {
    for (var i = 0; i < formularios.length; i++) formularios[i].style.display = 'none';
    var divID = select.options[select.selectedIndex].value;
    var div = document.getElementById(divID);
    div.style.display = 'block';
};

Se quiser usar jQuery, pode usar assim: http://jsfiddle.net/c4hyM/1/

$("#id_tipo_contacto").on('change', function(){
    $('.formulario').hide();
    $('#' + this.value).show();
});
1
  • 1
    Obrigado @Sergio!
    – pc_oc
    15/07/2014 às 16:06
2

Se tiveres apenas duas opções ate podes fazer de forma estática em javascript:

alteraDiv = function (){
if($('#id_tipo_contacto').val() == 1){
    $("#empresa").show();
    $("#casamento").hide();
}

if($('#id_tipo_contacto').val() == 2){
    $("#empresa").hide();
    $("#casamento").show();
}

Deixo aqui JSFiddle

Dinamicamente a resposta do @Sergio está bem completa

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .