Javascript 使用嵌套对象引导Multiselect和$.ajax GET_Javascript_Jquery_Ajax_Datatables_Bootstrap Multiselect

Javascript 使用嵌套对象引导Multiselect和$.ajax GET

javascript jquery ajax datatables

Javascript 使用嵌套对象引导Multiselect和$.ajax GET,javascript,jquery,ajax,datatables,bootstrap-multiselect,Javascript,Jquery,Ajax,Datatables,Bootstrap Multiselect,我正在努力使$.ajax获得嵌套对象，并将数据动态发送到Bootstrap Multiselect下拉选择选项。类似更具体地说，我想从data.php（使用DataTable Editor）中多选对象“company”：每个公司都存在多次，大约有1000行这是我当前的设置： <html> <select class="select-ajax form-control" placeholder="Entity Status" multiple="multiple">

我正在努力使$.ajax获得嵌套对象，并将数据动态发送到Bootstrap Multiselect下拉选择选项。类似

更具体地说，我想从data.php（使用DataTable Editor）中多选对象“company”：

每个公司都存在多次，大约有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>

变量“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>');
     }
});

$每个（数据、数据、函数（i、项）{
公司=项目公司；
如果（$（“.select ajax选项[value=”+item.company+“]”））。长度==0）{
$（'.select ajax'）.append（''+item.company+''）；
}
});

这很有效，谢谢。然而，我从专栏中得到了所有的记录，而不仅仅是唯一的记录。我如何避免下拉列表中的重复？我还有另一个multi-select，其中选项值（大约100）在一个500000行的表中。在那里我得到了一个“NetworkError:500内部服务器错误”，并且对象没有加载。文件太大了，或者在这种情况下我该怎么做？我已经更新了答案，以避免添加重复项。请勾选并在点击勾号时将其标记为答案。另外，Philipp，您对500000行表格的第二个要求不明确。你能详细说明一下吗。如果您遇到“NetworkError:500内部服务器错误”，则应该是后端服务器问题。但是如果您试图通过单个ajax获得5000000行，那么您肯定需要更改逻辑，通过单个ajax调用最多获得100或200行。太棒了。重复的解决方案也能很好地工作。对于500000行，我现在通过只将distincts过滤到另一个表中来减少后端的json。所以这现在也起作用了。不过，基于您的上述解决方案，我还有另一个愿望，如何按字母顺序对下拉列表中的选项进行排序？在不知道自己是否在正确的轨道上的情况下，我一直在寻找，例如，是否知道如何按字母顺序对选择列表进行排序？

    $.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>');
     }
});