Hide DIV when loading page according to select

Question

Hide DIV when loading page according to select

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Today I use this function to disappear the div, works perfectly, But I need the field already selected / option value="tickets" selected / Tickets / option / but the function only executes when it changes because this is set onchange, is there an event load that when opening the screen identify what is selected in the option and execute the function? onload, onpageshow, etc. not working

In short, when the screen opens it identifies that the "Tickets" field is selected and the others are hidden.

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><divclass="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 html jquery div

asked by anonymous 29.11.2017 / 20:35

3 answers

0

Run

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

When the document is already loaded

29.11.2017 / 20:36

0

You can do this by declaring the value of select (even though it is 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><divclass="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>

29.11.2017 / 22:14

Fetch API - CORS error Doubt in the html.Dropdownlist powered by a ViewBag

score 0 · Accepted Answer

If you need to do 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 code of the select, just call the function trigger indicating the event to execute, which in this case would be the change .

The logic itself can be simplified because it can directly fetch the element referring to id from the JQuery selector, and call show() without having to go through each element with each . >

Example with suggested changes:

$(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><divclass="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