selectize.js reload dropdown

Question

I have a dropdown with id "selectCountry" filled by ajax and on success I just bind the Selectize.

$('#selectCountry').selectize({
    create: true,
    sortField: 'text' 
});

When I rebind my original dropdown by ajax and try to reload/rebind or refreshed the old selectize auto complete box on success, there would be no change on old list.

Is there any way to reload or refresh selectize dropdown? I had try "clearOptions()" and "refreshOptions()".

P.S, I don't want to directly bind the selectize from ajax.

OK, now I am adding working example for this issue on jsfiddle

Please help me :( any suggestion would be great for me. Thanks alot

Answer 1

Some how, I found the answer and its working here

just add this line of code and its working.

$('#select-tools').selectize()[0].selectize.destroy();

Answer 2

Looks like you also opened an issue on the project, which isn't, IMHO, a good usage of the issues of the project.

I answered there, I will repeat the answer here in case it can be useful to other people.

You should not re-create the Selectize component out of the original tag. You should use it to update its options, using clearOptions() as you guessed, then addOption() (despite the singular, it accepts an array). I updated your fiddle (+1 for making one) to show this: https://jsfiddle.net/m06c56y0/20/

The relevant part is:

var selector;
$('#button-1').on('click', function () {
    selector = $('#select-tools').selectize({
        maxItems: null,
        valueField: 'id',
        labelField: 'title',
        searchField: 'title',
        options: [{
            id: 1,
            title: 'Spectrometer',
            url: 'http://en.wikipedia.org/wiki/Spectrometers'
        }, {
            id: 2,
            title: 'Star Chart',
            url: 'http://en.wikipedia.org/wiki/Star_chart'
        }],
        create: false
    }).data('selectize');
});

$('#button-2').on('click', function () {
    console.log(selector);
    selector.clearOptions();
    selector.addOption([{
            id: 1,
            title: 'Spectrometer',
            url: 'http://en.wikipedia.org/wiki/Spectrometers'
        }, {
            id: 3,
            title: 'Electrical Tape',
            url: 'http://en.wikipedia.org/wiki/Electrical_tape'
        }]);
});

Answer 3

You can also do this:

$('#whateverYouCalledIt').selectize()[0].selectize.clear();

for just clearing what has been selected. It will not clear your select list.