Logo SatellaSoft



Select com os estados Brasileiros

Marcações HTML e Javascript para estados Brasileiros.


Ícone homem Gunnar Correa
Ícone data de publicação 02/12/2015
Ícone quantidade de visualização 3,221
Ícone bandeira do Brasil Português

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

 




Sobre o autor


Gunnar Correa

Nome: Gunnar Correa

Site: http://www.gunnarcorrea.com


Autodidata, graduado em Desenvolvimento Web e especialista em Tecnologias na Educação em uma universidade no interior de São Paulo. Comecei meus estudos na área de programação quando ainda era criança, e atualmente estou estudando desenvolvimento de jogos.

Sou o CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Comentários



É necessário estar autenticado para comentar, clique aqui para se registrar ou aqui para acessar a sua conta!