Twitter bootstrap 3 引导multiselect刷新或重建不起作用

我想用ajax绑定我的multiselect，但在ajax调用后没有显示项目。我尝试重建或刷新multiselect，但仍然没有显示

 <script type="text/javascript">
     $(document).ready(function () {

         var categCheck = $('#multiselect').multiselect({
             includeSelectAllOption: true,
             enableFiltering: true
         });


         $.ajax({
             type: 'GET',
             url: "@Url.Content("~/Home/Listpositions/")",
             success: function (data) {
                 $.each(data.data, function (index, item) {
                     alert(item.PositionName);
                     var opt = $('<option />', {
                         value: item.PID,
                         text: item.PositionName
                     });
                     opt.appendTo(categCheck);

                 });
             }
         });
         $('#multiselect').multiselect('rebuild');
         categCheck.multiselect('rebuild');

         categCheck.multiselect('refresh');
         $("select.multiselect").multiselect("refresh");
   });
        </script>

这是我的多选页面链接：

---

如何从multiselect JS文件进行ajax调用，以及在哪个代码块中进行ajax调用？

您需要在ajax成功函数中重新生成和/或刷新。在代码中，进行AJAX调用，然后重新生成multiselect。但是，在AJAX调用成功之前，可能会发生重建。试试这个：

<script type="text/javascript">
   $(document).ready(function () {

     var categCheck = $('#multiselect').multiselect({
         includeSelectAllOption: true,
         enableFiltering: true
     });


     $.ajax({
         type: 'GET',
         url: "@Url.Content("~/Home/Listpositions/")",
         success: function (data) {
             $.each(data.data, function (index, item) {
                 alert(item.PositionName);
                 var opt = $('<option />', {
                     value: item.PID,
                     text: item.PositionName
                 });
                 opt.appendTo(categCheck);

                 // Rebuild after adding the options!
                 $('#multiselect').multiselect('rebuild');
             });
         }
     });
  });
</script>

使用“重新加载”对我来说效果很好。ajax调用中的MultiElectroLoad函数刷新复选框列表

---

这是100%的好代码

$(document).ready(function() {
var chkreport = $('#reporting_unit'); // Object creation for your dropdown

var ajaxpath = 'ajax/fend.php';
var ajaxUrl = baseUrl + ajaxpath;
$('#hospital_category').on('change', function() {
var hospital_id = this.value;
//alert(hospital_id);
$.ajax({
method: 'POST',
url: ajaxUrl,
data: {
perform_action: 'reporting_list',
hospital_id: hospital_id
},
dataType: 'html',
success: function(result) {

chkreport.append(result); // append option in the object created before ajax calling

// Now call multiselect function with their parameter
chkreport.multiselect({
columns: 1,
placeholder: 'Select Reporting Unit',
search: true,
selectAll: true
});

chkreport.multiselect('rebuild'); // it will reload dropdown need to create multiselect with checkbox option.
}
});

});

});

---

您使用的是引导multiselect还是jquery ui multiselect？请使用合适的标签？

$(document).ready(function() {
var chkreport = $('#reporting_unit'); // Object creation for your dropdown

var ajaxpath = 'ajax/fend.php';
var ajaxUrl = baseUrl + ajaxpath;
$('#hospital_category').on('change', function() {
var hospital_id = this.value;
//alert(hospital_id);
$.ajax({
method: 'POST',
url: ajaxUrl,
data: {
perform_action: 'reporting_list',
hospital_id: hospital_id
},
dataType: 'html',
success: function(result) {

chkreport.append(result); // append option in the object created before ajax calling

// Now call multiselect function with their parameter
chkreport.multiselect({
columns: 1,
placeholder: 'Select Reporting Unit',
search: true,
selectAll: true
});

chkreport.multiselect('rebuild'); // it will reload dropdown need to create multiselect with checkbox option.
}
});

});

});