Hide DIV when loading the tab according to select

Asked

Viewed 1,470 times

0

Today I use this function to disappear the div, works perfectly, But I need the field already selected /option value="boletos" Selected/Boletos/option/ but the function is only executed when it changes because this defined onchange, Is there an Event load that when opening the screen identifies what is selected in the option and execute the function? onload, onpageshow, etc. does not work

Summarizing when the screen opens it identifies that the field select "Boletos" is selected and hides the others.

THANK YOU!!

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>

javascript jquery html div

3 answers

0

Execute 

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

When the document is already loaded

0

You can do this by declaring the value of select (even though he was already selected) before firing a trigger. Just add the code below in your 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>

0


If you need to run something when the page loads and you are using Jquery use the default in Jquery:

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

To apply the select code simply call the function trigger indicating the event to be executed, which in this case would be the change.

The logic itself that has can be simplified because it can directly fetch the element referring to the id by the Jquery selector, and call the show() without having to pass each element with the each.

Example with suggested modifications:

$(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>

Documentation for the Trigger

  • I put in the <body onload="Function()" - as it indicated and worked. even updating the selected option is generated. !

Browser other questions tagged javascript jquery html div

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