Select com os estados Brasileiros

Marcações HTML e Javascript para estados Brasileiros.

Publicado em 02/12/2015 10:37

É comum desenvolver aplicações que necessite cadastrar o estado onde algum individuo reside ou até mesmo o destino de um produto. Para facilitar seu trabalho disponibilizamos neste artigo dois complementos para isto, um apenas com o select HTML e outra que é criado com auxilio do Javascript, caso esta manipulação necessite ser carregado a partir de um JSON ou Ajax.

Select HTML

Código 01:

<select name="slEstado" id="slEstado"> 
        <option value="ac">Acre</option> 
        <option value="al">Alagoas</option> 
        <option value="am">Amazonas</option> 
        <option value="ap">Amapá</option> 
        <option value="ba">Bahia</option> 
        <option value="ce">Ceará</option> 
        <option value="df">Distrito Federal</option> 
        <option value="es">Espírito Santo</option> 
        <option value="go">Goiás</option> 
        <option value="ma">Maranhão</option> 
        <option value="mt">Mato Grosso</option> 
        <option value="ms">Mato Grosso do Sul</option> 
        <option value="mg">Minas Gerais</option> 
        <option value="pa">Pará</option> 
        <option value="pb">Paraíba</option> 
        <option value="pr">Paraná</option> 
        <option value="pe">Pernambuco</option> 
        <option value="pi">Piauí</option> 
        <option value="rj">Rio de Janeiro</option> 
        <option value="rn">Rio Grande do Norte</option> 
        <option value="ro">Rondônia</option> 
        <option value="rs">Rio Grande do Sul</option> 
        <option value="rr">Roraima</option> 
        <option value="sc">Santa Catarina</option> 
        <option value="se">Sergipe</option> 
        <option value="sp">São Paulo</option> 
        <option value="to">Tocantins</option> 
</select>

O modelo abaixo apresenta uma alternativa com Javascript, para utilizar basta incorporar o arquivo estado.js ao HTML, incluir o JSON config e chamar a função que gera o estado.

estado.js

"use strict"

			function PreencherSelect(config){
			
				console.log("%c Fill select states", "color: #1E90FF;");
				var vetSiglas = new Array("ac", "al", "am", "ap", "ba", "ce", "df", "es", "go", "ma", "mt", "ms", "mg", "pa", "pb", "pr", "pe", "pi", "rj", "rn", "ro", "rs", "rr", "sc", "se", "sp", "to");
				
				var vetEstados = new Array("Acre", "Alagoas", "Amazonas", "Amapá", "Bahia", "Ceará", "Distrito Federal", "Espírito Santo", "Goiás", "Maranhão", "Mato Grosso", "Mato Grosso do Sul", "Minas Gerais", "Pará", "Paraíba", "Paraná", "Pernambuco", "Piauí", "Rio de Janeiro", "Rio Grande do Norte", "Rondônia", "Rio Grande do Sul", "Roraima", "Santa Catarina", "Sergipe", "São Paulo", "Tocantins");
				
				var Select = document.getElementById("slEstados");
				
				if(config.limparSelect){
					Select.innerHTML = "";
				}
				
				if(config.selecione){
					vetSiglas.unshift ("");
					vetEstados.unshift ("Selecione");
				}
				
				for(var i = 0; i < vetSiglas.length; i++){
					var Option = document.createElement("option");
					Option.value = vetSiglas[i];
					Option.innerHTML = vetEstados[i];
					
					Select.appendChild(Option);
					
					if(config.exibirConsole){
						console.log("%c "+ vetSiglas[i] + " - ", "color: #1E90FF;");
					}
				}
			}

HTML

<!doctype html>
<html>
	<head>
		<title>Estados Brasileiros</title>
		<meta charset="utf-8" />
		<script src="estados.js"></script>
		<script>
			document.addEventListener("DOMContentLoaded", function(){
				
				var config = {
					"selecione" : true,
					"exibirConsole" : true,
					"limparSelect" : true
				};
				
				PreencherSelect(config);
			}, false);
		</script>
	</head>
	<body>
		<select id="slEstados" name="slEstados"></select>
	</body>
</html>

Complementos

"ac", "al", "am", "ap", "ba", "ce", "df", "es", "go", "ma", "mt", "ms", "mg", "pa", "pb", "pr", "pe", "pi", "rj", "rn", "ro", "rs", "rr", "sc", "se", "sp", "to"

"Acre", "Alagoas", "Amazonas", "Amapá", "Bahia", "Ceará", "Distrito Federal", "Espírito Santo", "Goiás", "Maranhão", "Mato Grosso", "Mato Grosso do Sul", "Minas Gerais", "Pará", "Paraíba", "Paraná", "Pernambuco", "Piauí", "Rio de Janeiro", "Rio Grande do Norte", "Rondônia", "Rio Grande do Sul", "Roraima", "Santa Catarina", "Sergipe", "São Paulo", "Tocantins"