Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Adição dinâmica de options no selectize

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?

1 resposta
solução!

Fala ai Bruno, tudo bem? Não conheço essa Selectize, mas, olhando na documentação tem um exemplo justamente de estado e cidade:

var xhr;
var select_state, $select_state;
var select_city, $select_city;

$select_state = $('#select-cities-state').selectize({
    onChange: function(value) {
        if (!value.length) return;
        select_city.disable();
        select_city.clearOptions();
        select_city.load(function(callback) {
            xhr && xhr.abort();
            xhr = $.ajax({
                url: 'https://jsonp.afeld.me/?url=http://api.sba.gov/geodata/primary_city_links_for_state_of/' + value + '.json',
                success: function(results) {
                    select_city.enable();
                    callback(results);
                },
                error: function() {
                    callback();
                }
            })
        });
    }
});

$select_city = $('#select-cities-city').selectize({
    valueField: 'name',
    labelField: 'name',
    searchField: ['name']
});

select_city  = $select_city[0].selectize;
select_state = $select_state[0].selectize;

select_city.disable();

Repare que no onChange do select de estado é limpado as opções de cidade e feito um .load.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software