Olá, tenho dois campos com o plugin selectize. Um possui uma lista de estados (Rio de Janeiro, São Paulo e etc) e o outro é uma lista de municípios de acordo com o estado selecionado acima. A página é carregada com o primeiro select de estados normalmente enquanto que o segundo fica vazio, dependendo do valor selecionado no campo anterior. Gostaria de adicionar as opções de município no segundo campo dinamicamente por ajax de acordo com o valor do primeiro campo. Já tenho a função que carrega os valores prontos, porém ela só funciona com o select comum do navegador, com o selectize ela não funciona. Provavelmente tem algum método próprio para a adição de options. Estou utilizando Laravel para o projeto. O código segue abaixo:
<select id="sg_uf_residencia" class="campo-select" name="sg_uf_residencia">
<option value="">Selecione</option>
@foreach($ufs as $uf)
<option value="{{$uf->sg_uf}}">{{$uf->tx_nome_uf}}</option>
@endforeach
</select>
<select id="id_municipio_residencia" class="campo-select" name="id_municipio_residencia">
<option value="">Selecione</option>
</select>
$('#sg_uf_residencia').selectize({
sortField: 'text'
});
$('#id_municipio_residencia').selectize({
sortField: 'text'
});
função que carrega os valores do select de município (funciona sem o selectize):
if($('#sg_uf_residencia').val() !== '') {
var idMunicipioResidencia = $('#id_municipio_residencia').val();
$.ajax({
type: 'GET',
url : APP_URL+"/municipio/"+$('#sg_uf_residencia').val(),
success : function (items) {
$('#id_municipio_residencia').empty().append('<option value="">Selecione</option>');
$.each(items, function (i, item) {
$('#id_municipio_residencia').append($('<option>', {
value: item.id_municipio,
text : item.tx_nome_municipio
}));
});
$('#id_municipio_residencia').val(idMunicipioResidencia);
}
});
}
Aparentemente o append não funciona com selectize. Poderiam me fornecer alguma alternativa para o que preciso fazer ou função utilizada pelo selectize para adicionar as options na lista?