Select com os estados Brasileiros

Gunnar CorreaGunnar Correa02/12/2015 às 10:37:43 - 10.189 acessos

Marcações HTML e Javascript para estados Brasileiros.


É 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"

 


javascript estados brasil select html 5 option value client side desenvolvimento web aplicações

Compartilhe


Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web (FIPP), Especialista em Tecnologias na Educação (Unoeste) e Pós-graduando em Segurança da Informação (Universidade Cruzeiro do Sul). Começou seus estudos na área de programação quando era criança, e atualmente está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.



Site atualizado

Olá, nosso site recebeu uma nova atualização e por conta disso, alguns artigos ainda estão sendo atualizados. Dependendo do conteúdo que você procura, poderá encontrar imagens e trechos de códigos mal formatados.

Estamos trabalhando para normalizar todos os conteúdos, muito em breve, esse problema não mais existirá.


Comentários