Question

请注意，这不是<select>元素与multiple属性的关系，而是表格中的多个<select>，我在这里找不到。

请参阅此codepen

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

问题：我很确定这个非常简单，但任何人都可以告诉我代码有什么问题吗？它应该怎么写？

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

Answer 2

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

定位id-s

并从select html部分的类标记中删除“select2”。

Answer 3

将相同的类 相同的形式与多个select2 结合使用将可以像这样工作，我正在系统中动态添加选择。 / p>

$('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元素无法正常工作

3 个答案: