jquery - Create bootstrap select picker dynamically -

i'm using bootstrap select plugin. populating dynamically created select so:

var select = $('<select/>', {      'class':"selectpicker" }).selectpicker();  (var idx in data) {     if (data.hasownproperty(idx)) {         select.append('<option value=' + data[idx].id+ '>' + data[idx].text+ '</option>');     } }  select.selectpicker('refresh'); 

the data fine , select created, not recognizing bootstrap selectpicker trying create. have select on same page not create dynamically , works fine.

<select class="selectpicker">     <option>mustard</option>     <option>ketchup</option>     <option>relish</option> </select> 

$('.selectpicker').selectpicker(); 

how dynamically create bootstrap select? thanks.

you need append <select /> create dom before calling selectpicker() on it, this:

var $select = $('<select/>', {      'class':"selectpicker" }); (var idx in data) {     $select.append('<option value=' + data[idx].id + '>' + data[idx].text + '</option>'); }  $select.appendto('#myelement').selectpicker('refresh'); 

note use of append(), , removal of hasownproperty - you're looping through properties of object method call redundant.