Skip to content

Instantly share code, notes, and snippets.

@cassiocardoso

cassiocardoso/select-estados-br

Created February 12, 2014 23:31
Show Gist options
  • Save cassiocardoso/8966749 to your computer and use it in GitHub Desktop.
Save cassiocardoso/8966749 to your computer and use it in GitHub Desktop.
Download ZIP
Select com uma lista de todos os estados brasileiros.
Raw
select-estados-br
<select name="estados-brasil">
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapá</option>
<option value="AM">Amazonas</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="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
@Lukasrsv
Copy link

Lukasrsv commented Dec 8, 2020

deus te abençoe kkkk

@tiagopedrosoftmakersbr
Copy link

Como faço pra te mandar um mousepad?

@FortalezaRN
Copy link

Valeu, salvou lindamente

@fxnowteam
Copy link

contribuindo para preguiça alheia, só exibindo as UF

                                    <select name="estados-brasil">
                                        <option value="AC">AC</option>
                                        <option value="AL">AL</option>
                                        <option value="AP">AP</option>
                                        <option value="AM">AM</option>
                                        <option value="BA">BA</option>
                                        <option value="CE">CE</option>
                                        <option value="DF">DF</option>
                                        <option value="ES">ES</option>
                                        <option value="GO">GO</option>
                                        <option value="MA">MA</option>
                                        <option value="MT">MT</option>
                                        <option value="MS">MS</option>
                                        <option value="MG">MG</option>
                                        <option value="PA">PA</option>
                                        <option value="PB">PB</option>
                                        <option value="PR">PR</option>
                                        <option value="PE">PE</option>
                                        <option value="PI">PI</option>
                                        <option value="RJ">RJ</option>
                                        <option value="RN">RN</option>
                                        <option value="RS">RS</option>
                                        <option value="RO">RO</option>
                                        <option value="RR">RR</option>
                                        <option value="SC">SC</option>
                                        <option value="SP">SP</option>
                                        <option value="SE">SE</option>
                                        <option value="TO">TO</option>
                                    </select>

abençoado!

@cortelucas
Copy link

Lindo

@wictor-parmenis
Copy link

te amo

@LeoDev-bee-boop
Copy link

Obrigado seu maravilhoso.

@DilmarJunior
Copy link

Salvou muito !!

@JoaoBarrosVerde
Copy link

Excelente para usar com React JS

const states = [
  { value: 'AC', label: 'Acre' },
  { value: 'AL', label: 'Alagoas' },
  { value: 'AP', label: 'Amapá' },
  { value: 'AM', label: 'Amazonas' },
  { value: 'BA', label: 'Bahia' },
  { value: 'CE', label: 'Ceará' },
  { value: 'DF', label: 'Distrito Federal' },
  { value: 'ES', label: 'Espírito Santo' },
  { value: 'GO', label: 'Goiás' },
  { value: 'MA', label: 'Maranhão' },
  { value: 'MT', label: 'Mato Grosso' },
  { value: 'MS', label: 'Mato Grosso do Sul' },
  { value: 'MG', label: 'Minas Gerais' },
  { value: 'PA', label: 'Pará' },
  { value: 'PB', label: 'Paraíba' },
  { value: 'PR', label: 'Paraná' },
  { value: 'PE', label: 'Pernambuco' },
  { value: 'PI', label: 'Piauí' },
  { value: 'RJ', label: 'Rio de Janeiro' },
  { value: 'RN', label: 'Rio Grande do Norte' },
  { value: 'RS', label: 'Rio Grande do Sul' },
  { value: 'RO', label: 'Rondônia' },
  { value: 'RR', label: 'Roraima' },
  { value: 'SC', label: 'Santa Catarina' },
  { value: 'SP', label: 'São Paulo' },
  { value: 'SE', label: 'Sergipe' },
  { value: 'TO', label: 'Tocantins' }
];

@matheuscampbell
Copy link

Ajuda muito os preguiçosos vlw!! haha!

@sauloraizen
Copy link

Demorei muito
Pra te encontar
Agora eu quero só você...

@carlosnani
Copy link

Obrigado!

@bernardogontijo
Copy link

maravilha

Copy link

ghost commented May 26, 2021

Esse cara é foda.

@adonyskevin
Copy link

Obrigado amigo, você é um amigo.

@HonoratoAdilson
Copy link

Só tem anjo nesse post contribuindo com a preguiça alheia!

Obrigado aos envolvidos

@RC0D3
Copy link

RC0D3 commented Jun 11, 2021 •
edited

Laravel -> Blade template engine
(XGH) prazo tá apertado aqui pra ficar arrumando tão bem...

(Modo preguiçoso para recordar o valor, daria para fzr um js ou foreach...)


<select name="uf" required>
        <option value="">Escolher...</option>
        <option value="AC" @if(old('uf')== "AC") selected="selected" @endif>Acre</option>
        <option value="AL" @if(old('uf')== "AL") selected="selected" @endif>Alagoas</option>
        <option value="AP" @if(old('uf')== "AP") selected="selected" @endif>Amapá</option>
        <option value="AM" @if(old('uf')== "AM") selected="selected" @endif>Amazonas</option>
        <option value="BA" @if(old('uf')== "BA") selected="selected" @endif>Bahia</option>
        <option value="CE" @if(old('uf')== "CE") selected="selected" @endif>Ceará</option>
        <option value="DF" @if(old('uf')== "DF") selected="selected" @endif>Distrito Federal</option>
        <option value="ES" @if(old('uf')== "ES") selected="selected" @endif>Espírito Santo</option>
        <option value="GO" @if(old('uf')== "GO") selected="selected" @endif>Goiás</option>
        <option value="MA" @if(old('uf')== "MA") selected="selected" @endif>Maranhão</option>
        <option value="MT" @if(old('uf')== "MT") selected="selected" @endif>Mato Grosso</option>
        <option value="MS" @if(old('uf')== "MS") selected="selected" @endif>Mato Grosso do Sul</option>
        <option value="MG" @if(old('uf')== "MG") selected="selected" @endif>Minas Gerais</option>
        <option value="PA" @if(old('uf')== "PA") selected="selected" @endif>Pará</option>
        <option value="PB" @if(old('uf')== "PB") selected="selected" @endif>Paraíba</option>
        <option value="PR" @if(old('uf')== "PR") selected="selected" @endif>Paraná</option>
        <option value="PE" @if(old('uf')== "PE") selected="selected" @endif>Pernambuco</option>
        <option value="PI" @if(old('uf')== "PI") selected="selected" @endif>Piauí</option>
        <option value="RJ" @if(old('uf')== "RJ") selected="selected" @endif>Rio de Janeiro</option>
        <option value="RN" @if(old('uf')== "RN") selected="selected" @endif>Rio Grande do Norte</option>
        <option value="RS" @if(old('uf')== "RS") selected="selected" @endif>Rio Grande do Sul</option>
        <option value="RO" @if(old('uf')== "RO") selected="selected" @endif>Rondônia</option>
        <option value="RR" @if(old('uf')== "RR") selected="selected" @endif>Roraima</option>
        <option value="SC" @if(old('uf')== "SC") selected="selected" @endif>Santa Catarina</option>
        <option value="SP" @if(old('uf')== "SP") selected="selected" @endif>São Paulo</option>
        <option value="SE" @if(old('uf')== "SE") selected="selected" @endif>Sergipe</option>
        <option value="TO" @if(old('uf')== "TO") selected="selected" @endif>Tocantins</option>
        </select>

@grgbrasil
Copy link

grgbrasil commented Jun 26, 2021 •
edited

Vue select com busca e imagem:

<template>
  <div>
    <div class="input-group">
      <input v-model="filtro" @click="showlist=1" class="form-control">
      <div  @click="showlist=1" class="input-group-append">
        <button  @click="showlist=1" class="btn btn-secondary" type="button"><i class="fal fa-arrow-down"></i></button>
      </div>
    </div>
    <div v-show="showlist==1" style="height: 160px; overflow-y: scroll;background-color: white; position:absolute; z-index: 999; width: 100%; border: solid thin #e5e5e5;">
      <div v-for="item in estados" @click='seleciona(item.id,item.nome)' :value="item.id" v-show="(item.id + ' ' + item.nome).toLowerCase().includes(filtro.toLowerCase())">
        <span class="'flag-icon flag-icon-squared'"><img v-show="item.id!=''" :src="'https://sijur.com.br/sistema/app/assets/local/img/uf/' + item.id.toLowerCase() + '.gif'" height="12px"></span>
        <span class="flag-text">{{item.nome}}</span>
      </div>
    </div>
  </div>
</template>


<script>


module.exports = {
  props: {value:''},
  data:function () {
    return {
      filtro:'', showlist:false,
      estados : [
        {id: '', nome: 'Selecione'},
        {id: 'AC', nome: 'Acre'},
        {id: 'AL', nome: 'Alagoas'},
        {id: 'AP', nome: 'Amapá'},
        {id: 'AM', nome: 'Amazonas'},
        {id: 'BA', nome: 'Bahia'},
        {id: 'CE', nome: 'Ceará'},
        {id: 'DF', nome: 'Distrito Federal'},
        {id: 'ES', nome: 'Espírito Santo'},
        {id: 'GO', nome: 'Goiás'},
        {id: 'MA', nome: 'Maranhão'},
        {id: 'MT', nome: 'Mato Grosso'},
        {id: 'MS', nome: 'Mato Grosso do Sul'},
        {id: 'MG', nome: 'Minas Gerais'},
        {id: 'PA', nome: 'Pará'},
        {id: 'PB', nome: 'Paraíba'},
        {id: 'PR', nome: 'Paraná'},
        {id: 'PE', nome: 'Pernambuco'},
        {id: 'PI', nome: 'Piauí'},
        {id: 'RJ', nome: 'Rio de Janeiro'},
        {id: 'RN', nome: 'Rio Grande do Norte'},
        {id: 'RS', nome: 'Rio Grande do Sul'},
        {id: 'RO', nome: 'Rondônia'},
        {id: 'RR', nome: 'Roraima'},
        {id: 'SC', nome: 'Santa Catarina'},
        {id: 'SP', nome: 'São Paulo'},
        {id: 'SE', nome: 'Sergipe'},
        {id: 'TO', nome: 'Tocantins'}
      ]
    }
  },
  watch: {
    value: function(newValue){this.id=newValue;return;}
  },
  methods:{
    atualiza(){
      this.$emit("change",this.id);
      this.$emit("input",this.id);
    },
    seleciona(id,nome){
      this.filtro=nome;
      this.id=id;
      this.showlist=0;
      this.atualiza();
    },

  },

}
</script>

<style scoped>

span.select2 {
  width: 300px !important;
}

.flag-text {
  margin-left: 10px;
}

.flag-icon,
.flag-icon-background {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%
}

.flag-icon {
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em
}

.flag-icon:before {
  content: "\00a0"
}

.flag-icon.flag-icon-squared {
  width: 1em
}
</style>

@gusttavocaruso
Copy link

Valeu!!

@ArthurDeveloper
Copy link

Valeu por poupar meu trabalho! Kkkkkkkkkkkkkkk

@HugoDaniel2000
Copy link

HugoDaniel2000 commented Sep 16, 2021 •
edited 

function createOptions (){
  const arrayStates = ['AC', 'AL', 'AP', 'AM', 'BA', 'CE', 'DF', 'ES', 'GO', 'MA', 'MT', 'MS', 'MG', 'PA', 'PB', 'PR', 'PE', 'PI', 'RJ', 'RN', 'RS', 'RO', 'RR', 'SC', 'SP', 'SE', 'TO']
  for (let index = 0; index < arrayStates.length ; index += 1) {
  const option =  arrayStates[index];
  const createOptions = document.createElement('option');
  createOptions.innerText = option;
  createOptions.value = option;
  selectedOptions.appendChild(createOptions);
  }
}
createOptions();``

@joaosantiag0
Copy link

joaosantiag0 commented Sep 21, 2021 •
edited

public ICollection States { get; } = new List
{
new("", ""),
new("Acre","AC"),
new("Alagoas","AL"),
new("Amapá","AP"),
new("Amazonas","AM"),
new("Bahia","BA"),
new("Ceará","CE"),
new("Distrito Federal","DF"),
new("Espírito Santo","ES"),
new("Goiás","GO"),
new("Maranhão","MA"),
new("Mato Grosso","MT"),
new("Mato Grosso do Sul","MS"),
new("Minas Gerais","MG"),
new("Pará","PA"),
new("Paraíba","PB"),
new("Pernambuco","PE"),
new("Piauí", "PI"),
new("Rio de Janeiro", "RJ"),
new("Rio Grande do Norte","RN"),
new("Rio Grande do Sul", "RS"),
new("Rondônia","RO"),
new("Roraima", "RR"),
new("Santa Catarina","SC"),
new("São Paulo", "SP"),
new("Sergipe","SE"),
new("Tocantins", "TO")
};

@alexsilva75
Copy link

Muito Obrigado!

@mhsilva555
Copy link

Muito obrigado!!!

@tiagoskaterock
Copy link

Vocês são incríveis!

@uchoamaster
Copy link

Obrigado clã!

@giovannalinda
Copy link

Muito obrigada!! Vocês são demais :)

@dev-vitormacedo
Copy link

Muitíssimo obrigado! Ajudou muito

@almeidaalex
Copy link

almeidaalex commented Dec 31, 2022 •
edited

Ruby

 def br_states # rubocop:disable Metrics/MethodLength
    [

      %w[Acre AC],
      %w[Alagoas AL],
      %w[Amapá AP],
      %w[Amazonas AM],
      %w[Bahia BA],
      %w[Ceará CE],
      ['Distrito Federal', 'DF'],
      ['Espírito Santo', 'ES'],
      %w[Goiás GO],
      %w[Maranhão MA],
      ['Mato Grosso', 'MT'],
      ['Mato Grosso do Sul', 'MS'],
      ['Minas Gerais', 'MG'],
      %w[Pará PA],
      %w[Paraíba PB],
      %w[Pernambuco PE],
      %w[Piauí PI],
      ['Rio de Janeiro', 'RJ'],
      ['Rio Grande do Norte', 'RN'],
      ['Rio Grande do Sul', 'RS'],
      %w[Rondônia RO],
      %w[Roraima RR],
      ['Santa Catarina', 'SC'],
      ['São Paulo', 'SP'],
      %w[Sergipe SE],
      %w[Tocantins TO]
    ]
  end

@MedeirosJoel
Copy link

Obrigado amigo você é um amigo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment