Select chained HTML does not work properly

Asked

Viewed 40 times

0

I have the following select in html

<span class="IWLABEL11CSS" id="IWLABEL7">Órgão: </span>
   <select name="Distrito" size="1" width="180" class="COMBODISTCSS" id="COMBOFAB" tabindex="1">
        <option value="01">Gabinete do Prefeito</option>
        <option value="02">Coordenadoria de Governo e Comunicação Social</option>
        <option value="03">Secertaria Municipal de Planejamento</option>
        <option value="04">Procuradoria Jurídica</option>
        <option value="05">Ouvidoria Municipal</option>
        <option value="06">Secretaria Municipal de Administração</option>
        <option value="07">Secretaria Municipal da Fazenda</option>
        <option value="08">Auditoria Interna</option>
        <option value="09">Secretaria Municipal de Obras</option>
        <option value="10">Secretaria Municipal de Desenvolvimento Urbano e Meio Ambiente</option>
        <option value="11">Secretaria Municipal de Educação</option>
        <option value="12">Secretaria Municipal de Esportes e Lazer</option>
        <option value="13">Secretaria Municipal de Saúde</option>
        <option value="14">Secretaria Municipal de Desenvolvimento Econômico</option>
        <option value="15">Secretaria Municipal de Ação Social</option>
        <option value="16">Secretaria Municipal Agricultura</option>
        <option value="17">Câmara Municipalde Itabira</option>
        <option value="18">Fundação Cultural Carlos Drummond de Andrade</option>
    </select>

    <span class="IWLABEL11CSS" id="IWLABEL7">Unidade: </span>
        <select name="Concelho" size="1" width="195" class="COMBOCONCCSS" id="COMBOCID" tabindex="1">
        <option data-distrito="01" value="01">Gabinete do Prefeito</option>
        <option data-distrito="01" value="02">Departamento de Assuntos Institucionais</option>
        <option data-distrito="02" value="03">Gabinete da Coordenadoria de Governo e Comunicação Social</option>
        <option data-distrito="02" value="04">Departamento de Comunicação Social</option>
        <option data-distrito="02" value="05">Administração Distrital de Ipoema</option>
       <option data-distrito="02" value="06">Administração Distrital de Senhora do Carmo</option>
       <option data-distrito="03" value="07">Gabinete da Secretaria Municipal de Planejamento</option>
       <option data-distrito="03" value="08">Departamento de Orçamento Municipal</option>
       <option data-distrito="03" value="09">Departamento de Estudos e Avaliação</option>
       <option data-distrito="03" value="10">Departamento de Programas e Projetos</option>
       <option data-distrito="04" value="11">Procuradoria Jurídica</option>
       <option data-distrito="05" value="12">Ouvidoria Municipal</option>
       <option data-distrito="06" value="13">Gabineet ad Secretaria de Administração</option>
       <option data-distrito="06" value="14">Departamento de ecursos Humanos</option>
       <option data-distrito="06" value="15">Departamento de Contratos</option>
       <option data-distrito="06" value="16">Departamento de Material e Patrimônio</option>
       <option data-distrito="06" value="17">Departamento de Comunicação e Serviços Gerais</option>
       <option data-distrito="06" value="18">Departamento de Informática</option>
       <option data-distrito="07" value="19">Gabinete da Secretaria Municipal da Fazenda</option>
       <option data-distrito="07" value="20">Departamento de Tributação</option>
       <option data-distrito="07" value="21">Departamento de Finanças</option>
       <option data-distrito="08" value="22">Gabinete de Auditoria Interna</option>
       <option data-distrito="09" value="23">Gabinete da Secretaria municipal de Obras</option>
       <option data-distrito="09" value="24">Departamento de Obras</option>
       <option data-distrito="09" value="25">Departamento de Apoio Administrativo</option>
       <option data-distrito="09" value="26">Departamento de Estradas e Vias</option>
       <option data-distrito="10" value="27">Gabinete da Secretaria Municipal de Desenvolvimento Urbano e Meio Ambiente</option>
       <option data-distrito="10" value="28">Departamento de Urbanismo</option>
       <option data-distrito="10" value="29">Departamento de Meio Ambiente</option>
       <option data-distrito="10" value="30">Departamento de Serviços Urbanos</option>
      <option data-distrito="10" value="31">Departamento de Transportes e Trafegos</option>
      <option data-distrito="11" value="32">Gabinete da Secretaria Municipal da Educação</option>
      <option data-distrito="11" value="33">Departamento de Apoio ao Educando</option>
      <option data-distrito="11" value="34">Departamento de Administração Escolar</option>
      <option data-distrito="12" value="35">Departamento Tecnico Pedagógico</option>
      <option data-distrito="12" value="36">Gabinete da Secretaria Municipal de Esportes e Lazer</option>
      <option data-distrito="12" value="37">Departamento de Esportes e Lazer</option>
      <option data-distrito="13" value="38">Gabinete da Secretaria Municipal</option>
      <option data-distrito="13" value="39">Departamento de Planejamento e Administração em Saúde</option>
      <option data-distrito="13" value="40">Departamento de Ações em Saúde</option>
      <option data-distrito="13" value="41">Departamento de Policlinica</option>
      <option data-distrito="13" value="42">Departamento de Vigilancia em Saúde</option>
      <option data-distrito="14" value="43">Gabinete da Secretaria Municipalde Desenvolvimento Econômico</option>
      <option data-distrito="14" value="44">Departamento de Comércio e Turismo</option>
      <option data-distrito="14" value="45">Departamento de Desenvolvimento Indutrial</option>
      <option data-distrito="14" value="46">Departamento de Produção e Modernização Industrial</option>
      <option data-distrito="15" value="47">Gabinete da Secretaria Municipal de Ação Social</option>
      <option data-distrito="15" value="48">Departamento de Desenvolvimento Comunitário</option>
      <option data-distrito="15" value="49">Departamento de Promoção Humana</option>
      <option data-distrito="16" value="50">Gabinete da Secretaria Municipal de Agricultura e Abastecimento</option>
      <option data-distrito="16" value="51">Departamento de Abastecimento</option>
      <option data-distrito="16" value="52">Departamento de Fomento Agropecuario</option>
      <option data-distrito="17" value="53">Câmara Municipal</option>
      <option data-distrito="18" value="54">Fundação Cultural Carlos Drummond de Andrade</option>
</select>

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);
    });

But when I select from the 10th option in the first select, the second does not work.

  • 1

    Just change the comparison of === for ==.

  • It worked... you could explain the difference?

  • 1

    There’s a question on the subject here.

No answers

Browser other questions tagged

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