Dynamic checkbox with unwanted behavior

Asked

Viewed 31 times

3

I have these checkboxes, the idea is to be dynamic, appear only the organs that refer to the entity, but has a detail that I would like to correct: before selecting something in "Entity" all options are available on "Organ", but I would like her to start with the available options corresponding to the first option "Prefeitura Municipal" 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>

javascript html5

1 answer

1


You can just add one trigger() after the Event Handler, in this way:

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 loading the page, it will already call a change filtering the select.

  • 1

    exactly what I wanted, thanks again @dvd !

  • 1

    just waiting for time here, have limit a few minutes hehe

  • only one last thing here, in this selection the last option of the second checkbox is selected, has to put the first to be selected?

  • 1

    Just change that line: $('select[name="Concelho"]').html(novoSelect).val($('select[name="Concelho"] option:first').val());

  • ball show, buddy!

Browser other questions tagged javascript html5

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