3

请注意，这不是关于具有属性的<select>元素，而是一个表单中的多个 s，我在这里没有发现这个问题。multiple<select>

看到这个代码笔

我有两个<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();    
  };
4

3 回答 3

3

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

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

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

于 2016-01-25T10:43:21.143 回答
0 
<script type="text/javascript">
    $(document).ready(function(){
        $("#number1").select2();
        $("#number2").select2();
    });
</script>

定位 id-s

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

于 2016-01-25T11:19:04.370 回答
0

使用具有多个 select2的相同类 相同的表单将像这样工作，我用于系统中的动态添加选择。

$('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>

于 2020-12-08T07:21:40.260 回答