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

15 de setembro de 2021

Estados:

• Retorno de todos os Estados;
• Marcar o Estado na lista;
• Escolha do texto option padrão, exemplo: "Selecione um Estado";
• Alternar os nomes dos Estados por sigla ou por extenso.
• Por padrão o retorno é em um SELECT mas pode ser alterado através dos argumentos;

Cidades:

• Retorno de todas as Cidades de um Estado / Escolha do texto option padrão, exemplo: "Selecione uma Cidade";
• Alterar o padrão de retorno através de argumentos;
• Marcar a cidade na lista;

Retornando a cidade Cidades de acordo com o Estado selecionado:

• Usando o Estado para retornar as Cidades;

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

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

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

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/2/

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/2/

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/5/

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/1/

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/2/

É 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/28/

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/8/

*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/12/

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

Resultado final: https://jsfiddle.net/ted_k/7o5eyxuk/2/

• 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/12/