Skip to content

Instantly share code, notes, and snippets.

@cassiocardoso
Created February 12, 2014 23:31
Show Gist options
  • Select an option

  • Save cassiocardoso/8966749 to your computer and use it in GitHub Desktop.

Select an option

Save cassiocardoso/8966749 to your computer and use it in GitHub Desktop.
Select com uma lista de todos os estados brasileiros.
<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
Copy Markdown

Lukasrsv commented Dec 8, 2020

deus te abençoe kkkk

@tiagopedrosoftmakersbr
Copy link
Copy Markdown

Como faço pra te mandar um mousepad?

@FortalezaRN
Copy link
Copy Markdown

Valeu, salvou lindamente

@fxnowteam
Copy link
Copy Markdown

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
Copy Markdown

Lindo

@wictor-parmenis
Copy link
Copy Markdown

te amo

@LeoDev-bee-boop
Copy link
Copy Markdown

Obrigado seu maravilhoso.

@DilmarJunior
Copy link
Copy Markdown

Salvou muito !!

@JoaoBarrosVerde
Copy link
Copy Markdown

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
Copy Markdown

Ajuda muito os preguiçosos vlw!! haha!

@sauloraizen
Copy link
Copy Markdown

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

@carlosnani
Copy link
Copy Markdown

Obrigado!

@bernardogontijo
Copy link
Copy Markdown

maravilha

Copy link
Copy Markdown

ghost commented May 26, 2021

Esse cara é foda.

@adonyskevin
Copy link
Copy Markdown

Obrigado amigo, você é um amigo.

@HonoratoAdilson
Copy link
Copy Markdown

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

Obrigado aos envolvidos

@RC0D3
Copy link
Copy Markdown

RC0D3 commented Jun 11, 2021

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
Copy Markdown

grgbrasil commented Jun 26, 2021

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
Copy Markdown

Valeu!!

@ArthurDeveloper
Copy link
Copy Markdown

Valeu por poupar meu trabalho! Kkkkkkkkkkkkkkk

@HugoDaniel2000
Copy link
Copy Markdown

HugoDaniel2000 commented Sep 16, 2021

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
Copy Markdown

joaosantiag0 commented Sep 21, 2021

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
Copy Markdown

Muito Obrigado!

@mhsilva555
Copy link
Copy Markdown

Muito obrigado!!!

@tiagoskaterock
Copy link
Copy Markdown

Vocês são incríveis!

@uchoamaster
Copy link
Copy Markdown

Obrigado clã!

@giovannalinda
Copy link
Copy Markdown

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

@dev-vitormacedo
Copy link
Copy Markdown

Muitíssimo obrigado! Ajudou muito

@almeidaalex
Copy link
Copy Markdown

almeidaalex commented Dec 31, 2022

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
Copy Markdown

Obrigado amigo você é um amigo

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