Bootstrap 多选和 $.ajax GET 嵌套对象

Question

我正在努力 $.ajax GET 嵌套对象并将数据动态发送到 Bootstrap Multiselect 下拉菜单 select 选项。相近 .. Issue with Data returning from AJAX call showing up in Bootstrap Multiselect dropdown

更具体地说，我想从 data.php 中多重 select 对象 "company"（使用数据表编辑器）：

{"data":[{"DT_RowId":"row_1","company":"FirstCompany","webtechnology":"Contao",...},
{"DT_RowId":"row_2","company":"SecondCompany","webtechnology":"Wordpress",...},
{"DT_RowId":"row_3","company":"ThirdCompany","webtechnology":"Custom",...},
{"DT_RowId":"row_4","company":"FourthCompany","webtechnology":"TYPO3 CMS",...}],"options":[],"files":[]}

每个公司都存在多次，大约有 1000 行。

这是我当前的设置：

<html>
<select class="select-ajax form-control" placeholder="Entity Status" multiple="multiple"></select>
</html>

<script>
var company;

$(document).ready(function() {

$('.select-ajax').multiselect({
    maxHeight: 400,
    buttonWidth: '100%',
    includeSelectAllOption: true,
    enableFiltering: true
}); 

$.ajax({
  type: 'GET',
  url: '/data.php',
  dataType: 'json',
  success: function(data) {
     $.each(data, function (i, item) {
         company = item.company;
         $('.select-ajax').append('<option value="' + item.company + '">' + item.company + '</option>');
         console.log(item)
    });
    $('.select-ajax').multiselect('rebuild');
  },
  error: function() {
        alert('error loading items');
  }
 });

$('.select-ajax').trigger( 'change' );

}); 
</script>

console.log() 显示以下输出：

[Object { DT_RowId="row_1",  company="FirstCompany",  webtechnology:"Contao",  more...}, 
Object { DT_RowId="row_2",  company="SecondCompany",  webtechnology:"Wordpress",  more...}, 
Object { DT_RowId="row_3",  company="ThirdCompany",  webtechnology:"Custom",  more...}, 
Object { DT_RowId="row_4",  company="FourthCompany",  webtechnology:"TYPO3 CMS",  more...}, 46 more...]

Answer 1

变量 "data" 具有完整的 ajax 响应 {"data":[.........]}。我们需要在响应中迭代 "data" 键中的值。因此需要在响应中放置指向实际 JSON 数组的 "data.data" 以填充下拉列表内部成功处理程序尝试更改

    $.each(data, function (i, item)
                 to
    $.each(data.data, function (i, item)

为避免重复条目，您需要在将数据推送到下拉列表之前添加检查。所以最后成功处理程序中的代码应该如下所示。

$.each(data.data, function (i, item) {
     company = item.company;
     if($(".select-ajax option[value='"+item.company+"']").length == 0){
        $('.select-ajax').append('<option value="' + item.company + '">' + item.company + '</option>');
     }
});

Demo

Bootstrap 多选和 $.ajax GET 嵌套对象

Bootstrap Multiselect and $.ajax GET with nested objects

javascript

ajax

jquery

datatables

bootstrap-multiselect