Dynamic check box with unwanted behavior

Navigation
3

I have these checkboxes, the idea is to be dynamic, to appear only the bodies that refer to the entities, but there is a detail that I would like to correct: before selecting something in "Entity" all options are available in the "Organ" , but you would like it to start with the options available corresponding to the first option "City Hall" or empty 

var concelhos = $('select[name="Concelho"] option');
$('select[name="Distrito"]').on('change', function() {
  var Distrito = this.value;
  var novoSelect = concelhos.filter(function() {
    return $(this).data('distrito') == Distrito;
  });
  $('select[name="Concelho"]').html(novoSelect);
});
<form method="post" action="">
  <br><br><br>
  <span class="IWLABEL11CSS" id="IWLABEL7">Entidade: </span>
  <select name="Distrito" size="1" width="180" class="COMBODISTCSS" id="COMBOFAB" tabindex="1">
                   
                   <option value="01">Prefeitura Municipal - PM</option>
                   <option value="02">Fundação Cultural </option>
                   <option value="03">Serviço Autônomo de Água e Esgoto</option>
             </select>
  <br><br>
  <span class="IWLABEL11CSS" id="IWLABEL7">Órgão: </span>
  <select name="Concelho" size="1" width="195" class="COMBOCONCCSS" id="COMBOCID" tabindex="1" onchange="mudouValor()">
                     <option selected="01" data-distrito="1" value="0">Todos os Órgãos</option>
                     <option data-distrito="01" value="01">Câmara Municipal</option>
                     <option data-distrito="01" value="02">Gabinete do Prefeito</option>
                     <option data-distrito="01" value="03">Secretaria Municipal de Governo</option>
                     <option data-distrito="01" value="04">Assessoria de Comunicação Social</option>
                     <option data-distrito="01" value="05">Procuradoria Jurídica</option>
                     <option data-distrito="01" value="06">Ouvidoria Municipal</option>
                     <option data-distrito="01" value="07">Secretaria Municipal de Administração</option>
                     <option data-distrito="01" value="08">Secretaria Municipal de Planejamento</option>
                     <option data-distrito="01" value="09">Secretaria Municipal da Fazenda</option>
                     <option data-distrito="01" value="10">Secretaria Municipal de Saúde</option>
                     <option data-distrito="01" value="11">Secretaria Municipal de Desenvolvimento Econônomico</option>
                     <option data-distrito="01" value="12">Secretaria Municipal de Obras</option>
                     <option data-distrito="01" value="13">Secretaria Municipal de Ação Social</option>
                     <option data-distrito="01" value="14">Secretaria Municipal de Desenvolvimento</option>
                     <option data-distrito="01" value="15">Secretaria Municipal de Esporte e Lazer</option>
                     <option data-distrito="01" value="16">Secretaria Municipal de Educação</option>
                     <option data-distrito="01" value="17">Secretaria Municipal de Agricultura</option>
                     <option data-distrito="01" value="18">Secretaria Municipal de Auditoria</option>
                     <option data-distrito="01" value="19">Gabinete da Secretaria Municipal da Fazenda</option>
                     <option data-distrito="01" value="20">Departamento de Tributação</option>
                     <option data-distrito="01" value="21">Departamento de Finanças</option>
                     <option data-distrito="01" value="22">Gabinete de Auditoria Interna</option>
                     <option data-distrito="02" value="23">Fundação Cultural </option>
                     <option data-distrito="03" value="24"> Serviço Autônomo de Água e Esgoto</option>
            </select>
  <input type="hidden" name="nome_unidade" id="nome_unidade" />

  <br><br>
  <input type="submit" id="consultar" value="Consultar" />
</form>
    
asked by anonymous 10.04.2018 / 19:42

1 answer

1

You can only add trigger() after the event handler , like this: 

var concelhos = $('select[name="Concelho"] option');
$('select[name="Distrito"]').on('change', function() {
  var Distrito = this.value;
  var novoSelect = concelhos.filter(function() {
    return $(this).data('distrito') == Distrito;
  });
  $('select[name="Concelho"]').html(novoSelect);
}).trigger("change");

When you load the page, it will already call a change by filtering select .

    
10.04.2018 / 19:49
PostgreSQL Percentage Camera does not work