Skip to content

Dropdown com estados e cidades do Brasil em javascript (vanilla)

License

Notifications You must be signed in to change notification settings

giovanigenerali/cidadesestadosjs

Repository files navigation

Cidades e Estados BR - JS

Codacy Badge

Lista de cidades e estados do Brasil que carrega um campo <select> com os estados e outro <select> com as cidades do estados selecionado.


Como utilizar

A instalação é simples e básica, só incluir o script no html e configurar os campos select conforme abaixo:

<script src="/dist/CidadesEstados.min.js"></script>

Estados

<select name="estado" data-estado="SP" data-grupo-id="1"></select>

Attributos:

  • data-estado=<estado>

    • Valor do estado (ex: SP, RJ, etc...) para carregamento automático, o valor é opcional.
    • Caso não queira carregar um estado automaticamente deixe vazio. data-estado=""
  • data-grupo-id=<ID>

    • ID do grupo que os campos estados e cidade pertencem e vão interagir.
    • Atributo obrigatório.

Cidades

<select name="cidade" data-cidade="São Paulo" data-grupo-id="1"></select>

Attributos:

  • data-cidade=<cidade>

    • Valor do estado (ex: São Paulo, Rio de Janeiro, etc...) para carregamento automático, o valor é opcional.
    • Caso não queira carregar uma cidade automaticamente deixe vazio. data-cidade=""
  • data-grupo-id=<ID>

    • ID do grupo que os campos estados e cidade pertencem e vão interagir.
    • Atributo obrigatório.

Utilizando múltiplos campos

Para utilizar múltiplos campos é só definir o nome do grupo dos campos correspondentes:

<select name="estado[]" data-estado="SP" data-grupo-id="1"></select>
<select name="cidade[]" data-cidade="São Paulo" data-grupo-id="1"></select>

<select name="estado[]" data-estado="RJ" data-grupo="2"></select>
<select name="cidade[]" data-cidade="Rio de Janeiro" data-grupo-id="2"></select>

<select name="estado[]" data-estado="DF" data-grupo-id="3"></select>
<select name="cidade[]" data-cidade="" data-grupo-id="3"></select>

<select name="estado[]" data-estado="" data-grupo-id="4"></select>
<select name="cidade[]" data-cidade="" data-grupo-id="4"></select>