jquery - 使用 select2 的多个选择元素无法正常工作

Question

请注意，这不是关于 <select>元素为 multiple属性，但多个 <select>是在一个表单中，我在这里没有找到这个问题。

查看此codepen

我有两个<select>具有唯一 ID 和名称的元素。在这两个元素上我也使用了 select2。我原以为两者会启动相同的行为，因此使用相同的 jQuery 代码。两者确实启动了 select2，但后者没有显示 <option> 中包含的任何选项。标签。它只显示“未找到结果”消息。

问题:我很确定这个问题非常微不足道，但是有人可以告诉我代码有什么问题吗？应该怎么写呢？

这是 html:

<form action="" method="POST" role="form">
  <div class="form-group">
    <label for="">Add Service Name</label>
    <select class="form-control select2" name="test-1" id="number1">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
  </div>
  <div class="form-group">
    <label for="">Add Service Name</label>
    <select class="form-control select2-service-package" id="number2" name="test-2">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">Create</button>
</form>

这是 jQuery 代码

  if ($('.select2-service-package').length > 0) {
    $('.select2-service-package').select2();
  };

  if ($('.select2').length > 0) {
    $('.select2').select2();    
  };

Answer 1

尝试将类 select2 的名称更改为其他名称(例如 myselect)。

Select2 插件可能在内部使用 select2 类。

工作示例:https://jsfiddle.net/6pnv3v58/