Lista de cidades e estados do Brasil que carrega um campo <select>
com os estados e outro <select>
com as cidades do estados selecionado.
A instalação é simples e básica, só incluir o script no html e configurar os campos select
conforme abaixo:
<script src="cidades-estados.js"></script>
<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.
<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.
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>