0

Hoje eu uso essa função para desaparecer a div, funciona perfeitamente, Mas eu preciso que o campo ja venha selecionado /option value="boletos" selected/Boletos/option/ mas a função só é executada quando muda porque esta definido onchange, existe algum event load que ao abrir a tela identifique o que esta selecionado no option e execute a função? onload, onpageshow, etc. nao funciona

Resumindo quando a tela abrir ela identifica que o campo select "Boletos" esta selecionado e ocultas as outras.

VALEU!!

function ocultar_div(){
  $('.div-sel').hide();
  $('#TipodeDocumento_6').on('change', function() {
    var selecionado = $(this).val();
    $('.div-sel').each(function() {
      if ($(this).attr('id') == selecionado) {
        $(this).toggle();
      } else {
        $(this).hide();
      }
    });
  });
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-3" >
  <div class="form-group">
    <label for="TipodeDocumento_6" >Tipo de Documento</label>
    <select class="form-control" name="TipodeDocumento_6" id="TipodeDocumento_6">
      <option value="">Selecione</option>
      <option value="Contratos_Aditivos">Contratos e Aditivos</option>
      <option value="Notas_Fiscais">Notas Fiscais</option>
      <option value="boletos" selected>Boletos</option>        
    </select>
  </div>
</div>
<div class="div-sel panel panel-default" id="boletos">
  <div class="panel-heading ">
    <h3 class="panel-title"> <b>Boletos</b> </h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <label for="ServioProduto_4">Serviço/Produto</label>
          <input type="text" class="form-control" name="ServioProduto_4" id="ServioProduto_4">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="RazaoSocial_Boletos">Razão Social</label>
          <input type="text" class="form-control" name="RazaoSocial_Boletos" id="RazaoSocial_Boletos">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="CNPJFornecedor_Boletos">CNPJ do Fornecedor</label>
          <input type="text" class="form-control" name="CNPJdoFornecedor_10" id="CNPJdoFornecedor_10">
        </div>
      </div>
    </div>
  </div>
</div>

0

3 Respostas 3

0

Se precisa de executar algo quando a página carrega e está a utilizar JQuery utilize o padrão em JQuery:

$(function() {
    //código a executar quando todos os elementos estão carregados
});

Para aplicar o código do select basta chamar a função trigger indicando o evento a executar, que neste caso seria o change.

A própria lógica que tem pode ser simplificada pois pode ir diretamente buscar o elemento referente ao id pelo seletor de JQuery, e chamar o show() sem ter que passar em cada elemento com o each.

Exemplo com as modificações sugeridas:

$(function() { //onload aqui
  $('#TipodeDocumento_6').on('change', function() {
    $('.div-sel').hide();
    let idSelecionado = $(this).val(); //construir o id
    if (idSelecionado != "") $("#" + idSelecionado).show(); //mostrar o elemento
  });
  
  $('#TipodeDocumento_6').trigger("change"); //aplicar a lógica do change
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-3" >
  <div class="form-group">
    <label for="TipodeDocumento_6" >Tipo de Documento</label>
    <select class="form-control" name="TipodeDocumento_6" id="TipodeDocumento_6">
      <option value="">Selecione</option>
      <option value="Contratos_Aditivos">Contratos e Aditivos</option>
      <option value="Notas_Fiscais">Notas Fiscais</option>
      <option value="boletos" selected>Boletos</option>        
    </select>
  </div>
</div>
<div class="div-sel panel panel-default" id="boletos">
  <div class="panel-heading ">
    <h3 class="panel-title"> <b>Boletos</b> </h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <label for="ServioProduto_4">Serviço/Produto</label>
          <input type="text" class="form-control" name="ServioProduto_4" id="ServioProduto_4">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="RazaoSocial_Boletos">Razão Social</label>
          <input type="text" class="form-control" name="RazaoSocial_Boletos" id="RazaoSocial_Boletos">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="CNPJFornecedor_Boletos">CNPJ do Fornecedor</label>
          <input type="text" class="form-control" name="CNPJdoFornecedor_10" id="CNPJdoFornecedor_10">
        </div>
      </div>
    </div>
  </div>
</div>

Documentação para o trigger

1
  • Coloquei no <body onload="function()" - como indicou e funcionou. mesmo atualizando a opção selecionada é gerada. Fiz da maneira que indicou e funcionou perfeitamente Obrigado!
    – Rapha
    Commented 30/11/2017 às 12:45
0

Execute

$('#TipodeDocumento_6').trigger('change');

Quando o documento já estiver carregado

0

Você pode fazer isso declarando o valor do select (mesmo ele já estando selecionado) antes de disparar um trigger. Basta adicionar o código abaixo no seu script:

$(window).on('load',function(){
   ocultar_div();
   $('#TipodeDocumento_6').val('boletos').trigger('change');
});

function ocultar_div(){
   $('#TipodeDocumento_6').on('change', function() {
      $('.div-sel').hide();
      var selecionado = $(this).val();
      $('.div-sel').each(function() {
         if ($(this).attr('id') == selecionado) {
            $(this).toggle();
         } else {
            $(this).hide();
         }
      });
   });
}

$(window).on('load',function(){
   ocultar_div();
   $('#TipodeDocumento_6').val('boletos').trigger('change');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-3" >
  <div class="form-group">
    <label for="TipodeDocumento_6" >Tipo de Documento</label>
    <select class="form-control" name="TipodeDocumento_6" id="TipodeDocumento_6">
      <option value="">Selecione</option>
      <option value="Contratos_Aditivos">Contratos e Aditivos</option>
      <option value="Notas_Fiscais">Notas Fiscais</option>
      <option value="boletos" selected>Boletos</option>        
    </select>
  </div>
</div>
<div class="div-sel panel panel-default" id="boletos">
  <div class="panel-heading ">
    <h3 class="panel-title"> <b>Boletos</b> </h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <label for="ServioProduto_4">Serviço/Produto</label>
          <input type="text" class="form-control" name="ServioProduto_4" id="ServioProduto_4">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="RazaoSocial_Boletos">Razão Social</label>
          <input type="text" class="form-control" name="RazaoSocial_Boletos" id="RazaoSocial_Boletos">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="CNPJFornecedor_Boletos">CNPJ do Fornecedor</label>
          <input type="text" class="form-control" name="CNPJdoFornecedor_10" id="CNPJdoFornecedor_10">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="div-sel panel panel-default" id="Contratos_Aditivos">
  <div class="panel-heading ">
    <h3 class="panel-title"> <b>Contratos_Aditivos</b> </h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <label for="ServioProduto_4">Serviço/Produto</label>
          <input type="text" class="form-control" name="ServioProduto_4" id="ServioProduto_4">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="RazaoSocial_Boletos">Razão Social</label>
          <input type="text" class="form-control" name="RazaoSocial_Boletos" id="RazaoSocial_Boletos">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="CNPJFornecedor_Boletos">CNPJ do Fornecedor</label>
          <input type="text" class="form-control" name="CNPJdoFornecedor_10" id="CNPJdoFornecedor_10">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="div-sel panel panel-default" id="Notas_Fiscais">
  <div class="panel-heading ">
    <h3 class="panel-title"> <b>Notas_Fiscais</b> </h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <label for="ServioProduto_4">Serviço/Produto</label>
          <input type="text" class="form-control" name="ServioProduto_4" id="ServioProduto_4">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="RazaoSocial_Boletos">Razão Social</label>
          <input type="text" class="form-control" name="RazaoSocial_Boletos" id="RazaoSocial_Boletos">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group">
          <label for="CNPJFornecedor_Boletos">CNPJ do Fornecedor</label>
          <input type="text" class="form-control" name="CNPJdoFornecedor_10" id="CNPJdoFornecedor_10">
        </div>
      </div>
    </div>
  </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 .