1

I want to add dynamic data to options on select picker by using jquery. 

<select class="selectpicker customSelectPic selectLocation" data-width="100%" data-live-search="true">
    <option value="1">Madurai</option>
    <option value="2">Chennai</option>
    <option value="3">Bangalore</option>
    <option value="4">Delhi</option>
    <option value="5">Kolkata</option>
</select>

I tried using append function 

$.each(data,function(i,e){
   $(".selectLocation").append('<option value="1">'+e+'</option>');
});

But, it does not render is correctly. Help me to solve the problem

  • Your code appears to work fine: https://jsfiddle.net/xn1rqy56/. Can you please add more details about what the specific problem is. I'd also suggest checking the console for errors. – Rory McCrossan Apr 02 '19 at 10:59
  • Use the selectPicker api. It won't know you added something if you don't tell it – charlietfl Apr 02 '19 at 11:00
  • See chosen answer: https://stackoverflow.com/questions/17730621/how-to-dynamically-add-options-to-an-existing-select-in-vanilla-javascript – GrafiCode Apr 02 '19 at 11:13

1 Answers1

1
$(".selectPicker").append('<option value="">'+dynamic data+'</option>');
$('.selectPicker').selectpicker('refresh');