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>