Select with state and city search

Question

Select with state and city search

Navigation

#1 by (2 votes)

0

I'm here creating a form where the person should choose the state and after selected the list of corresponding cities is loaded in the other select, I'm using a ready library cities-states-js , so far so good, only that I had the idea and also add the Chosen , which creates a search option within select.

However when I join these two it does not work, when I select the state the city list is not loaded, as you can see in the example below.I have used an Update code that has in the documentation of the Chosen , but it did not work.

$('#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><scriptsrc="https://webmachado.com.br/js/cidades-estados-1.4-utf8.js"></script>
<script src="https://webmachado.com.br/js/chosen.jquery.min.js"></script><linkhref="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>

javascript html jquery

asked by anonymous 05.10.2017 / 15:47

1 answer

Identify repeated indices and exchange only one of them When Adding ImageButton ListView Selector to Function

score 2 · Accepted Answer

You must call the .trigger("chosen:updated"); of the cities select after the state select is changed or you have a selected option. However, if you call immediately, the Chosen plugin ends up trying to update before the values of the cities are filled. To solve this, just put a small delay of 100 milliseconds before calling the update, like this:

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><scriptsrc="https://webmachado.com.br/js/cidades-estados-1.4-utf8.js"></script>
<script src="https://webmachado.com.br/js/chosen.jquery.min.js"></script><linkhref="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>