Bootstrap-select: refresh method not working with dynamically added elements

[helloromero]

Hey,

When I dynamically add a new select div to the dom the newly added element doesn't work. The refresh method doesn't seem to have any effect.

Do you know whats going wrong?

[judimator]

Hello, Do you solve yout problem? I have the same situation.

[helloromero]

@judimator nope, I am still waiting on an answer. If I find one I will post it here.

[judimator]

Ok, thanks a lot. For now I just use common bootstrap select:)

[amitsquare]

Adding new select with "ClassName" won't be rendering with the effect of Library .
So Refresh function can be applied only to existing Element if you do any modification on it .

So better approach will be to clone the exiting element & Do modification on that only .
Below given function can be used to generate a new element using the existing bootstrap-select element .

el :-- Clone of existing Bootstrap-select Element .So that Existing Bootstrap-Select Element doesn't get distorted .
Choice(Optional) :-- "add"/"all"/"remove"
options(Optional) :-- normal value if(choice == "add" || choice == "remove") else Array

function selectPickerApiElement(el,choice,options){ $(el).find('select').selectpicker() ; $(el).children().eq(2).siblings().remove() ; if(choice == "add"){ $(el).find('.selectpicker').append("<option>"+options+"</option>") ; }else if(choice == "all"){ $(el).find('.selectpicker').children().remove() ; for(var i = 0 ; i <options.length ; i++){ $(el).find('.selectpicker').append("<option>"+options[i]+"</option>") ; } }else if(choice == "remove"){ var selectOptionsLength = $(el).find('.selectpicker').children().length ; for(var i = 1 ; i <= selectOptionsLength ; i++){ if(options == $(el).find('.selectpicker').children().eq(i).val()){ $(el).find('.selectpicker').children().eq(i).remove() ; break ; }else{ continue ; } } } $(el).find('select').selectpicker('refresh') ; return $(el).children().first().unwrap() ; }

[judimator]

Hi, but it doesn't work, at least for me:(

[amitsquare]

Can you give me sample code to dig out ?

As it is working fine for me !!
hope below given JSFiddle will help you out .

https://jsfiddle.net/amitsqure/jeusqvkq/

[judimator]

Thanks! I forgot clone needed element!

[tenhobi]

Can't you just use use $('.selectpicker').selectpicker('refresh'); on each change - and add it to the end of your selectpicker code section, e.g.:

// some other handlers

$(document).on('change', '.selectpicker', function () {
    $('.selectpicker').selectpicker('refresh');
});

This works for me. :-)

[JenHa]

Hey togehter,
I have the same Problem now. Did you found any solution on this?
I'm adding new selects (complete new selects itself, not only new options like in the fiddle @amitsquare provided ). Refresh only works on existing elements.

[dragipostolovski]

@tenhobi thank you, it works :)

[douglott]

You may have solved this already or moved on to another solution but I just came up against the same issue. To solve this, I do not clone the post-rendered HTML selectpicker. This (frustratingly) does not work.

I instead clone an element that contains one or more select elements without the selectpicker class. After cloning, I add a unique ID (not required) and the 'selectpicker' css class (required) and then call refresh. This renders as expected with no duplicates.

[mwaleedraza]

$("myComboBoxSelector").data('combobox').refresh()
Run this after updating the List otherwise it will not show the updated list.