0

Preciso criar um formulário, onde as opções INSCRIÇÃO OAB, SEÇÃO e SUBSEÇÃO apareçam apenas se o usuário selecionar ADVOGADO como profissão. Há uma lista pré-definida de profissões. Como faço para que esse bloco (camposAdv) apareça apenas quando ADVOGADO for selecionado?

<div class="form-group col-xs-12">
    <label>Profissão<span class="text-danger">*</span></label>
    <select id="listaProfissao" name="Usuario.id_pd_Profissao" class="form-control" required>                       
    <option></option>
    </select>
</div>
<div class="hidden" id="camposAdv">
    <div class="form-group col-xs-12">
        <label>Inscrição OAB<span class="text-danger">*</span></label>
        <input type="text" id="ds_inscricaoOab" name="usuario.ds_inscricaoOab" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_inscricaoOab" required>
    </div>
    <div class="form-group col-xs-12">
        <label>Seção<span class="text-danger">*</span></label>
        <input type="text" id="ds_secao" name="usuario.ds_secao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_secao" required>
    </div>
    <div class="form-group col-xs-12">
        <label>Subseção<span class="text-danger">*</span></label>
        <input type="text" id="ds_subsecao" name="usuario.ds_subsecao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_subsecao" required>
    </div>
</div>
2
  • jquery? javascript?
    – user60252
    Commented 23/06/2020 às 19:51
  • Bruno o ambiente é técnico, evite colocar gírias, cumprimentos ou assuntos tecnicamente não relacionados com a pergunta. Commented 23/06/2020 às 19:57

2 Respostas 2

0

Crie uma opção para advogado.

 <option id="advogado" value="advogado">Advogado</option>

Em seguida, pegue o valor desse option e use no Javascript usando a cláusula IF.

 var opAdvogado = document.getElementById("advogado").value;
    
    if(!opAdvogado) {
       document.getElementById("camposAdv").style.display = "none";
    } else {
       document.getElementById("camposAdv").style.display = "block";
    }
0

Javascript puro

  1. Coloque a div referente ao advogado inicialmente oculta com style="display: none;

    <div class="hidden" id="camposAdv" style="display: none;">
    
  2. No select chame uma função que dispara ao selecionar um option

    <select ......... onchange="exibir_ocultar(this)">
    
  3. Crie uma função que dispara ao mudar o valor do select, ou seja, selecionar um option

function exibir_ocultar(val) {
  if(val.value == 'advogado') {
    document.getElementById('camposAdv').style.display = 'block';
  }
  else {
    document.getElementById('camposAdv').style.display = 'none';
  }
};
<div class="form-group col-xs-12">
        <label>Profissão<span class="text-danger">*</span></label>
        <select id="listaProfissao" name="Usuario.id_pd_Profissao" class="form-control" required onchange="exibir_ocultar(this)">
        <option value="fiscal natureza">fiscal natureza</option>
        <option value="advogado">advogado</option>
        <option value="medico">medico</option>

        </select>
    </div>

    <div class="hidden" id="camposAdv" style="display: none;">
        <div class="form-group col-xs-12">
            <label>Inscrição OAB<span class="text-danger">*</span></label>
            <input type="text" id="ds_inscricaoOab" name="usuario.ds_inscricaoOab" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_inscricaoOab" required>
        </div>
        <div class="form-group col-xs-12"">
            <label>Seção<span class="text-danger">*</span></label>
            <input type="text" id="ds_secao" name="usuario.ds_secao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_secao" required>
        </div>
        <div class="form-group col-xs-12">
            <label>Subseção<span class="text-danger">*</span></label>
            <input type="text" id="ds_subsecao" name="usuario.ds_subsecao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_subsecao" required>
        </div>
    </div>

JQUERY

$(document).ready(function(){
    $("#listaProfissao").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue == "advogado"){
                $(".hidden").show();
            } else{
                $(".hidden").hide();
            }
        });
    }).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group col-xs-12">
    <label>Profissão<span class="text-danger">*</span></label>
    <select id="listaProfissao" name="Usuario.id_pd_Profissao" class="form-control" required>
    <option value="fiscal natureza">fiscal natureza</option>
    <option value="advogado">advogado</option>
    <option value="medico">medico</option>

    </select>
</div>

<div class="hidden" id="camposAdv">
    <div class="form-group col-xs-12">
        <label>Inscrição OAB<span class="text-danger">*</span></label>
        <input type="text" id="ds_inscricaoOab" name="usuario.ds_inscricaoOab" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_inscricaoOab" required>
    </div>
    <div class="form-group col-xs-12"">
        <label>Seção<span class="text-danger">*</span></label>
        <input type="text" id="ds_secao" name="usuario.ds_secao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_secao" required>
    </div>
    <div class="form-group col-xs-12">
        <label>Subseção<span class="text-danger">*</span></label>
        <input type="text" id="ds_subsecao" name="usuario.ds_subsecao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_subsecao" required>
    </div>
</div>

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 .