从 REST API 填充多选 select2 选项

Question

我有 3 个 select2 字段，我想使用 API 中的 AJAX 来填充它们。我的问题是，如何直接从 API 填充第一个选择字段选项，然后也由 API 填充第二个字段选项，但根据我在第一个选择字段中的选择，第三个选择字段也是如此。

例如，下面是我的代码和数据：

应用程序编程接口

[
    {
        "id": 1,
        "project_type": "tv",
        "project_stage": "new",
        "project_name": "Project A"
    },
    {
        "id": 2,
        "project_type": "game",
        "project_stage": "completed",
        "project_name": "Project B"
    },
    {
        "id": 3,
        "project_type": "game",
        "project_stage": "new",
        "project_name": "Project C"
    },
    {
        "id": 4,
        "project_stage": "completed",
        "project_type": "film",
        "project_name": "Project D"
    }
]

超文本标记语言

<div class="group">
        <select class="project_type" id="project_type" multiple="multiple">
                <option value=""></option>
        </select>
        <select class="project_status" id="project_status" multiple="multiple"">
                <option value=""></option>
        </select>
        <select class="project_select" id="project_select" multiple="multiple">
                <option value=""></option>
        </select>
</div> 

JavaScript

$('#project_type').select2({placeholder: "Select project type",});
$('#project_status').select2({placeholder: "Select project Status",});
$('#project_select').select2({placeholder: "Select project",});

预期结果 ：

现在，project_type选择字段将所有项目类型填充为选项，并假设我们选择，"game"那么project_status选项将是：

<select class="project_status" id="project_status" multiple="multiple"">
    <option value="completed">Completed</option>
    <option value="new">New</option>
</select>

如果我们选择completed，第三个过滤器将是：

<select class="project_select" id="project_select" multiple="multiple">
    <option value="Project B">Project B</option>
</select>

我之前从jinja2填充了这个，它不是动态的，非常感谢任何帮助，谢谢。

更新 ：

下面是我当前的代码，出于奇怪的原因，即使对于第一个过滤器，即使我正在获取数据，它也不会填充选项：

        $('#project_type').select2({
            placeholder: "Select project type",
            ajax: {
                url: '/api/filter/',
                delay: 250,
                type: 'GET',
                data: function (params) {
                    var query = {
                      search: params.term,
                      type: 'public'
                    }
                return query
                },
                processResults: function (data) {
                    var data1 = $.map(data, function (obj, idx) {
                        console.log(obj.project_type);
                        return obj;
                    });
                    console.log("processResults2:", data1);
                    return {
                        results: data1,
                      };
                 }
            }
        });

Answer 1

以下是实现 Select2 Ajax 填充（级联）的代码片段：

var data = [
    {
        "id": 1,
        "project_type": "tv",
        "project_stage": "new",
        "project_name": "Project A"
    },
    {
        "id": 2,
        "project_type": "game",
        "project_stage": "completed",
        "project_name": "Project B"
    },
    {
        "id": 3,
        "project_type": "game",
        "project_stage": "new",
        "project_name": "Project C"
    },
    {
        "id": 4,
        "project_stage": "completed",
        "project_type": "film",
        "project_name": "Project D"
    }
];

sel_type();
$('#project_status').select2({placeholder: ""});
$('#project_select').select2({ placeholder: ""});

function sel_type() {
  $('#project_type').select2({
      placeholder: "Select project type",
       ajax: {
       type: "POST",
       url: '/echo/json/',
       data: function(params){
         var query={
             message:params.term,
             data: data
         }
         return { json: JSON.stringify( query ) }
       },
       processResults: function (data) {
         var grouped = groupBy(data.data, 'project_type');
         var data1 = [], i = 0;
         for (var k in grouped) {
            data1.push({"id": i++, "text": k})
         }
         return {
           results: data1,
         };
      }
     }
   });
   
   $('#project_type').on('select2:select', function (e) {
      var data = e.params.data;
      console.log(data);
      sel_status(data.text);
  });
}

function sel_status(type) {
   $('#project_status').select2({
      placeholder: "Select project status",
       ajax: {
       type: "POST",
       url: '/echo/json/',
       data: function(params){
         var query={
             message:params.term,
             data: data
         }
         return { json: JSON.stringify( query ) }
       },
       processResults: function (data) {
         var data1 = $.map(data.data, function (obj, idx) {
           if (obj.project_type==type)
 		          return obj;
         });
         var grouped = groupBy(data1, 'project_stage');
         var data1 = [], i = 0;
         for (var k in grouped) {
            data1.push({"id": i++, "text": k})
         }
         return {
           results: data1,
         };
      }
     }
   });
   
   $('#project_status').on('select2:select', function (e) {
      var data = e.params.data;
      console.log(data);
      sel_proj(type, data.text);
  });
 }
 
 function sel_proj(type, status) {
   $('#project_select').select2({
      placeholder: "Select project",
       ajax: {
       type: "POST",
       url: '/echo/json/',
       data: function(params){
         var query={
             message:params.term,
             data: data
         }
         return { json: JSON.stringify( query ) }
       },
       processResults: function (data) {
         var data1 = $.map(data.data, function (obj, idx) {
         	if (obj.project_type==type && obj.project_stage==status) {
             obj.id = obj.id || idx;
             obj.text = obj.project_name;
             return obj;
          }
         });
         return {
           results: data1,
         };
      }
     }
   });
 }
 
 var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

select {
  width:200px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

<div class="group">
  <select class="project_type" id="project_type" multiple="multiple">
    <option value=""></option>
  </select>
  <br/>
  <select class="project_status" id="project_status" multiple="multiple">
    <option value=""></option>
  </select>
  <br/>
  <select class="project_select" id="project_select" multiple="multiple">
    <option value=""></option>
  </select>
</div>

但由于 Ajax 请求，它在 StackOverflow 中不起作用。

工作版本（使用 JsFiddle echo）位于：https ://jsfiddle.net/beaver71/4nq62nqo/

PS：您必须将Ajax请求中的uri更改为您的，并删除数据的POST。