CODEWITHSUNDEEP
javascriptjqueryselectize.js
jsn alf
jsn alf

Reputation: 43

how to refresh selectize options?

I have an ajax call that change a select element options every success, i loop through the data and put it into a string

$.each(value, function(i, trx){
    trxListOptions += "<option value="+trx+">";
    trxListOptions += trx;
    trxListOptions += "</option>"
}

then i appended the html string into select element

$("#selectizeTrx").append(trxListOptions);

then i initialize selectize

$("selectizeTrx").selectize();

this works, but only for the first time, after the second ajax call that change every select options, selectize options wont show the new options, it still shows the old options.

how to refresh/reload selectize options so it adjust to original select element ??

Upvotes: 1

Views: 5956

Answers (2)

Mehmet Emre Vural
Mehmet Emre Vural

Reputation: 398

$.each($('select.#selectizeTrx'),function (i, el) {
    el.selectize.destroy();//destroy your selectize
})
var allOptions =  $('select.#selectizeTrx').html();//get current select options.
allOptions += newOptions; //combine your new options and current options
$('select.#selectizeTrx').html(allOptions);//set all options
$('select.#selectizeTrx').selectize({

});//and selectize.

note: destroy method can remove select options. Because get current options and combine new options.

Upvotes: 0

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

Try this before appending and initializing

 $('#selectizeTrx').selectize()[0].selectize.destroy();

Fiddle link

Upvotes: 2

Related Questions