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

Mccloskey

had try this also :(, its no use. – Mccloskey

Can you post more code? – Observance

what else, more code needed :), Actually other code is related to jtable.org, above code is complete and working on first time dropdown bind. – Mccloskey

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();

Mccloskey

Is there a way to force the Selectize to re-populate from the original <select>, without having to destroy the selectize and lose your existing settings? – Purveyance

Did you find an answer to this? How to refresh the drop down without destroy? – Silvertongued

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'
        }]);
});

Ilarrold

you missed my question, Actually when I want to click on 1st button it will bind with that values and when I will click on 2nd button it will bind the 2nd options, and it will continue from 2nd to 1st. I found the solution and wrote the answer. please vote up :) because I am unable to vote my own answer. – Mccloskey

@ObaidAhmed I still don't get the interest of re-creating the Selectize control, instead of updating it, but if that's really what you want / need to do, I am glad you found your solution. BTW, don't forget to close the issue you opened... – Ilarrold

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.

Snowbird