1

Estou aqui criando um formulário onde a pessoa deverá escolher o estado e após selecionado a lista de cidades correspondentes é carregada no outro select, estou usando uma biblioteca pronta cidades-estados-js, até aí tudo bem, só que tive a ideia e acrescentar também o plugin Chosen, que cria uma opção de pesquisa dentro do select.

No entanto quando eu junto esses dois ele não funciona, quando seleciono o estado a lista de cidade não é carregada, como vocês podem ver no exemplo abaixo.Até usei um código de Update que tem na documentação do plugin Chosen, mas não funcionou.

$('#estado2').chosen({
  placeholder_text_single: 'Procure seu Estado',
  no_results_text: 'Nenhum resultado: '
});

$('#cidade2').chosen({
  placeholder_text_single: 'Procure sua Cidade',
  no_results_text: 'Nenhum resultado: '
});

$("#estado2").trigger("chosen:updated");
$("#cidade2").trigger("chosen:updated");
select {
  padding: 5px 15px;
}

hr {
  margin-top: 35px;
  margin-bottom: 35px;
}
<script src="https://webmachado.com.br/js/jquery-3.2.0.js"></script>
<script src="https://webmachado.com.br/js/cidades-estados-1.4-utf8.js"></script>
<script src="https://webmachado.com.br/js/chosen.jquery.min.js"></script>
<link href="https://webmachado.com.br/js/chosen.min.css" rel="stylesheet" />




<select id="estado"></select>
<select id="cidade">
        <option value="">Selecione uma cidade </option>
</select>


<hr />

<p>Com o plugin Chosen</p>
<select id="estado2"></select>
<select id="cidade2">
        <option value="">Selecione uma cidade </option>
</select>

<script language="JavaScript" type="text/javascript" charset="utf-8">
  new dgCidadesEstados({
    cidade: document.getElementById('cidade'),
    estado: document.getElementById('estado')
  });

  new dgCidadesEstados({
    cidade: document.getElementById('cidade2'),
    estado: document.getElementById('estado2')
  });
</script>

2 Respostas 2

2

É preciso chamar o .trigger("chosen:updated"); do select de cidades depois que o select de estados for alterado ou tiver uma opção selecionada. Porém, se chamar imediatamente, o plugin Chosen acaba tentando fazer o update antes dos valores das cidades serem preenchidos. Para resolver isso, basta colocar um pequeno atraso de 100 milissegundos antes de chamar o update, dessa forma:

dgCidadeEstados = new dgCidadesEstados({
  cidade: document.getElementById('cidade'),
  estado: document.getElementById('estado')
});

$("#cidade").chosen({
  placeholder_text_single: 'Procure sua Cidade',
  no_results_text: 'Nenhum resultado: '
});

$("#estado").chosen({
  placeholder_text_single: 'Procure sua Cidade',
  no_results_text: 'Nenhum resultado: '
}).change(function() { // configura uma função para o evento change do select de estados
  setTimeout(function() { // seta um atraso de 100ms e aciona o evento 'updated' do select de cidades, fazendo que seja atualizado
    $("#cidade").trigger("chosen:updated");
  }, 100);
});
select {
  padding: 5px 15px;
}

hr {
  margin-top: 35px;
  margin-bottom: 35px;
}
<script src="https://webmachado.com.br/js/jquery-3.2.0.js"></script>
<script src="https://webmachado.com.br/js/cidades-estados-1.4-utf8.js"></script>
<script src="https://webmachado.com.br/js/chosen.jquery.min.js"></script>
<link href="https://webmachado.com.br/js/chosen.min.css" rel="stylesheet" />



<select id="estado" class="chosen"></select>
<select id="cidade" class="chosen"><option>Selecione uma cidade</option></select>

1
  • Cara, eu abrir um sorrisão aqui quando vi isso funcionar rsrsr. Muito obrigado mesmo, agora já até fiz o teste aqui usando o contact form 7 do wordpress Commented 5/10/2017 às 20:35
-1

Segue um select em vue dos estados com imagens

let app = new Vue({
el:'#seluf',
  data: {
      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'}
      ]
    },
  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();
    },

  },

})
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
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

  <div id='seluf' class='container'>
    <label>Estado</label>
    <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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .