使用 select2 的多个 select 元素无法正常工作

Question

请注意，这不是关于具有 multiple 属性的 <select> 元素，而是关于表单中的多个 <select>，我没有在此处找到相关问题。

看到这个codepen

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

问题：我很确定这个问题很简单，但是谁能告诉我代码有什么问题吗？应该怎么写？

这是 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

尝试将 class select2 的名称更改为其他名称（例如 myselect）。

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

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

Answer 2

<script type="text/javascript">
    $(document).ready(function(){
        $("#number1").select2();
        $("#number2").select2();
    });
</script>

定位 id-s

并从 class 标签中删除 select html 部分的 "select2"。

Answer 3

使用相同的class 相同的形式与多个select2 将像这样工作，我在系统中使用动态添加 select。

$('body').on('focus',".myselect", function(){
                    $(this).select2({ });
            });
            
 $('#item-add').on('click', function () {

var frm = $('#frm');
            
                    frm.find('.data')
                        .append(
                            '<br><div class="form-group"> <label for="">Add Service Name</label><select class="form-control myselect" id="number2" name="test-2"><option>Service 1</option><option>Service 2</option></select></div>'
                        );



            });

.myselect{
  width:150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>

<form action="" method="POST" role="form" id="frm">
<div class="data">
  <div class="form-group">
    <label for="">Add Service Name</label>
    <select class="form-control myselect" name="test-1" id="number1">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
  </div>
  <br>
  <div class="form-group">
    <label for="">Add Service Name</label>
    <select class="form-control myselect" id="number2" name="test-2">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
  </div>
  <br>
  <div class="form-group">
    <label for="">Add Service Name</label>
    <select class="form-control myselect" id="number2" name="test-2">
      <option>Service 1</option>
      <option>Service 2</option>
    </select>
  </div>
  </div>
  <br>
   <button type="button" class="btn btn-sm btn-primary" id="item-add">Add</button>
                                                
  <button type="submit" class="btn btn-primary">Create</button>
</form>

使用 select2 的多个 select 元素无法正常工作

Multiple select element using select2 does not work properly

jquery

jquery-select2

jquery-select2-4

select2