javascript - selectize.js reload dropdown - Stack Overflow

admin管理员组

文章数量:1178539

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

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

• javascript
• jquery
• json
• autocomplete
• selectize.js

Share Improve this question Follow edited May 27, 2015 at 8:20 Obaid Ahmed asked May 26, 2015 at 12:00 Obaid AhmedObaid Ahmed 60611 gold badge44 silver badges1616 bronze badges 3

• had try this also :(, its no use. – Obaid Ahmed Commented May 26, 2015 at 12:04
• Can you post more code? – basher Commented May 26, 2015 at 21:02
• what else, more code needed :), Actually other code is related to jtable.org, above code is complete and working on first time dropdown bind. – Obaid Ahmed Commented May 27, 2015 at 6:10

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 23

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

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

You can also do this:

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

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

本文标签： javascriptselectizejs reload dropdownStack Overflow