Listas de todas as Cidades e Estados Brasileiros
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md Ajuste no botão de doação Apr 4, 2018
cidade-estados-brasil.js
cidade-estados-brasil.min.js

README.md

Cidades e Estados do Brasil

Código criado em JavaScript (sem uso de library) para retornar as Cidades e Estados brasileiros. Abaixo segue as principais funcionalidades do script.


Faça sua doação:


Funcionalidades:

Estados:


Cidades:


Retornando a cidade Cidades de acordo com o Estado selecionado:



Retornando os Estados:

Através do elementID você coloca o ID do SELECT.

new statesCitiesBR({
	states: {
		elementID: "selects_estado"
	}
});

Resultado final: https://jsfiddle.net/ted_k/41axqrc4/


Marcando um Estado na lista:

Através do current você adiciona a SIGLA do Estado.

new statesCitiesBR({
	states: {
		elementID: "selects_estado",
		current: "BA"
	}
});

Resultado final: https://jsfiddle.net/ted_k/b5vdy8fq/


Escolha do texto option padrão "Selecione um Estado":

Através do defaultOption, adicione um Texto padrão.

new statesCitiesBR({
	states: {
		elementID: "selects_estado",
		defaultOption: "Selecione um Estado"
	}
});

Resultado final: https://jsfiddle.net/ted_k/bu0L3yhv/1/


Alternar os nomes dos Estados por sigla ou por extenso:

Através do initial com valor "true", você alterna por Sigla ou Extenso.

new statesCitiesBR({
	states: {
		elementID: "selects_estado",
		initial: true
	}
});

Resultado final: https://jsfiddle.net/ted_k/uh98tbjf/


Por padrão o retorno é em um SELECT mas pode ser alterado através dos argumentos:

Através dos arguments, você pode inserir outro elemento, no caso foi usado uma LISTA.

new statesCitiesBR({
	states: {
		elementID: "lista_estado",
		arguments: {
			before: "<li>",
			after: "</li>",
		}
	}
});

Lembre-se também de alterar o elemento HTML que receberá o retorno. Resultado final: https://jsfiddle.net/ted_k/1yqc6wzh/

Outros argumentos:

O defaultOption, também pode ser usado dentro do arguments.

new statesCitiesBR({
	states: {
		elementID: "lista_estado",
		arguments: {
			before: "<li>",
			after: "</li>",
			defaultOption: "Selecione um Estado"
		}
	}
});

Resultado final: https://jsfiddle.net/ted_k/2aL90f8e/



Retorno de todas as Cidades de um Estado / Escolha do texto option padrão, exemplo: "Selecione uma Cidade":

É necessário o uso do state para retorno das Cidades.

new statesCitiesBR({
	cities: {
		elementID: "selects_cidades",
		state: "BA",
		defaultOption: "Selecione uma Cidade"
	}
});

Resultado final: https://jsfiddle.net/ted_k/5v0kfsr0/1/


Alterar o padrão de retorno através de argumentos:

Através dos arguments, você pode inserir outro elemento, no caso foi usado uma LISTA.

new statesCitiesBR({
	cities: {
		elementID: "lista_cidades",
		state: "BA",
		arguments: {
			before: "<li>",
			after: "</li>",
			defaultOption: "Selecione uma Cidade"
		}
	}
});

O defaultOption, também pode ser usado dentro do arguments.

Resultado final: https://jsfiddle.net/ted_k/r4532rfp/


Marcando uma Cidade na lista:

Através do current você adiciona o NOME da Cidade. Para que a opção current em cities funcione é obrigatório o uso das opções current em states e state deve ter o valor auto em cities.

new statesCitiesBR({
	states: {
		elementID: "lista_estados",
		current: "BA"
	},
	cities: {
		elementID: "lista_cidades",
		state: "auto",
		current: "Salvador"
	}
});


Usando o Estado para retornar as Cidades:

*No parâmetro "state", do objeto cities é só colocar a string "auto", que irá sincronizar direto com o estado selecionado acima. É necessário o uso do state em conjunto com a cities *.

new statesCitiesBR({
	states: {
		elementID: "lista_estados",
		defaultOption: "Selecione um Estado"
	},
	cities: {
		elementID: "lista_cidades",
		state: "auto",
		defaultOption: "Selecione uma Cidade"
	}
});

Resultado final: https://jsfiddle.net/ted_k/5vqnmLad/


  • OBS: Para usar em uma LISTA é necessário usar os objetos separados e só funcionará com o "states" usando pouco de javascript para restagar o valor de um atributo, o "data-uf". *

Resultado final: https://jsfiddle.net/ted_k/d492hcje/


Faça sua doação: