多个选择框使用selectpicker后追加ajax jquery无法正确显示

inspect option value

Multiple selectbox append jquery not displayed properly .am used selectpicker with bootstrap select box , but appending ok ,displayed not properly , list displayed outside selectbox

$('.selectpicker').selectpicker();
$.ajax({

               url: '/pincode_filter',
               type: "get",
               data: {option: id},
               success: function (data) {
               // $(".test").empty();
                       $(".test").append('<option>Select</option>');
                       $.each(data,function(key,value){
                           $(".test").append('<option value="'+value['Pincode']+'">'+value['Pincode']+'</option>');
                       });

just append on your select tag class check this for example

like

 $(".selectpicker").append('<option>Select</option>');
 $.each(data,function(key,value){
 $(".selectpicker").append('<option value="'+value['Pincode']+'">'+value['Pincode']+'</option>');
                   });

According to selectpicker documentation you need to refresh selectpicker elements after making some direct changes to them:

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

So, assuming you have <select class="test form-control selectpicker"> tag your java script success block, now can looks like this:

success: function (data) {
   $(".test").append('<option>Select</option>');
   $.each(data,function(key,value){
      $(".test").append('<option value="'+value['Pincode']+'">'+value['Pincode']+'</option>');
   });
   $('.test').selectpicker('refresh');
}