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

Question

多个选择框附加 jquery 未正确显示。我使用带有引导选择框的选择选择器，但附加确定，显示不正确，列表显示在选择框外$('.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>');                       });

Answer 1

根据 selectpicker文档，您需要在对它们进行一些直接更改后刷新 selectpicker 元素：

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

所以，假设你已经<select class="test form-control selectpicker">标记了你的 java 脚本success块，现在看起来像这样：

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');

}

Answer 2

只需附加在您选择的标签类上 ，例如检查这个

喜欢

 $(".selectpicker").append('<option>Select</option>');

 $.each(data,function(key,value){

 $(".selectpicker").append('<option value="'+value['Pincode']+'">'+value['Pincode']+'</option>');

                   });