Select2：为什么复制的代码演示无效？

Question

我要在select中加载10.000行数据。 提高性能我想用“查询”构造函数加载它们。 我想从文档页面上的示例“ e5”（加载数据）开始。 我还添加了所有“ e10”-“正在加载阵列数据”的演示

除第一个元素“ e10”外，其他所有元素均不起作用。谁能帮我 ？ 我在哪里错了？

$(document).ready(function() {
  $("#e5").select2({
    minimumInputLength: 1,
    query: function(query) {
      var data = { results: [] },
        i, j, s;
        
      for (i = 1; i < 5; i++) {
        s = "";
        for (j = 0; j < i; j++) { s = s + query.term; }
        data.results.push({ id: query.term + i, text: s });
      }

      query.callback(data);
    }
  });

  $("#e10").select2({
    theme: "classic",
    data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}],
  });

  var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}];

  function format(item) { return item.tag; }

  $("#e10_2").select2({
    data: { results: data, text: 'tag' },
    formatSelection: format,
    formatResult: format,
    theme: "classic"
  });

  $("#e10_3").select2({
    data: { results: data, text: function(item) { return item.tag; } },
    formatSelection: format,
    formatResult: format,
    theme: "classic"
  });
  
  $("#e10_4").select2({
    data: function() { return { text: 'tag', results: data }; },
    formatSelection: format,
    formatResult: format,
    theme: "classic"
  });
});

<link href="http://www.digitalenetwork.it/select2test/css/select2.css" rel="stylesheet" />
<script src="http://www.digitalenetwork.it/select2test/js/jquery-3.3.1.min.js"></script>
<script src="http://www.digitalenetwork.it/select2test/js/select2.full.min.js"></script>

<div>
  <div>
    <div>
      <label for="e5">e5</label>
      <div><input id="e5" name="e5" type="hidden" style="width:100%"></div>
    </div>
    <div>
      <label for="e10">e10</label>
      <div><input type="hidden" id="e10" style="width:100%" /></div>
    </div>
    <div>
      <label for="e10_2">e10_2</label>
      <div><input type="hidden" id="e10_2" style="width:100%" /></div>
    </div>
    <div>
      <label for="e10_3">e10_3</label>
      <div><input type="hidden" id="e10_3" style="width:100%" /></div>
    </div>
    <div>
      <label for="e10_4">e10_4</label>
      <div><input type="hidden" id="e10_4" style="width:100%" /></div>
    </div>
  </div>
</div>