Select 2 在通过 jQuery 追加后不起作用

Question

Select2 在尝试通过 jquery 添加更多 select 时表现不同。

最初它工作正常，但在尝试添加点击添加按钮时它无法正常工作。

找到下面的代码

function selectRefresh(){
    $('.select2').select2({
        tags:true,
        placeholder: "Select an Option",
        allowClear: true,
        width:'100%'
    });
}
$('.add').click(function(){
    $('.main').append($('.new-wrap').html());
    selectRefresh();
});
$(document).ready(function(){
    selectRefresh();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<div class="new-wrap" style="display: none;">
    <select class="form-control select2">
        <option>test</option>
        <option>test</option>
        <option>test</option>
        <option>test</option>
    </select>
</div>
<div class="main">
    <select class="form-control select2">
        <option>test 1</option>
        <option>test 2</option>
        <option>test 3</option>
    </select>
</div>
<button type="button" class="btn btn-primary add">Add</button>

Answer 1

只为 .main class 中的 select 标签初始化 select2 插件，否则它将为隐藏元素初始化，并且会有一些额外的 HTML 由 select2 插件生成的标签。

function selectRefresh() {
  $('.main .select2').select2({
    //-^^^^^^^^--- update here
    tags: true,
    placeholder: "Select an Option",
    allowClear: true,
    width: '100%'
  });
}
$('.add').click(function() {
  $('.main').append($('.new-wrap').html());
  selectRefresh();
});
$(document).ready(function() {
  selectRefresh();
});

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

<div class="new-wrap" style="display: none;">
  <select class="form-control select2">
    <option>test</option>
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>
</div>
<div class="main">
  <select class="form-control select2">
    <option>test 1</option>
    <option>test 2</option>
    <option>test 3</option>
  </select>
</div>
<button type="button" class="btn btn-primary add">Add</button>

更新 1： 如果有多个地方可以做同样的事情，那么 select 那些基于共同祖先或兄弟姐妹的地方。

使用共同的父元素：

function selectRefresh() {
  $('.main .select2').select2({
    //-^^^^^^^^--- update here
    tags: true,
    placeholder: "Select an Option",
    allowClear: true,
    width: '100%'
  });
}
$('.add').click(function() {
  var $prnt = $(this).parent();
  $prnt.find('.main').append($prnt.find('.new-wrap').html());
  selectRefresh();
});
$(document).ready(function() {
  selectRefresh();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<div>
  <div class="new-wrap" style="display: none;">
    <select class="form-control select2">
      <option>test</option>
      <option>test</option>
      <option>test</option>
      <option>test</option>
    </select>
  </div>
  <div class="main">
    <select class="form-control select2">
      <option>test 1</option>
      <option>test 2</option>
      <option>test 3</option>
    </select>
  </div>
  <button type="button" class="btn btn-primary add">Add</button>
</div>

<div>
  <div class="new-wrap" style="display: none;">
    <select class="form-control select2">
      <option>test</option>
      <option>test</option>
      <option>test</option>
      <option>test</option>
    </select>
  </div>
  <div class="main">
    <select class="form-control select2">
      <option>test 1</option>
      <option>test 2</option>
      <option>test 3</option>
    </select>
  </div>
  <button type="button" class="btn btn-primary add">Add</button>
</div>

通过 selecting 前一个兄弟元素 :

function selectRefresh() {
  $('.main .select2').select2({
    //-^^^^^^^^--- update here
    tags: true,
    placeholder: "Select an Option",
    allowClear: true,
    width: '100%'
  });
}
$('.add').click(function() {
  var $this = $(this);
  $this.prevAll('.main').first().append($this.prevAll('.new-wrap').first().html());
  selectRefresh();
});
$(document).ready(function() {
  selectRefresh();
});

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

<div class="new-wrap" style="display: none;">
  <select class="form-control select2">
    <option>test</option>
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>
</div>
<div class="main">
  <select class="form-control select2">
    <option>test 1</option>
    <option>test 2</option>
    <option>test 3</option>
  </select>
</div>
<button type="button" class="btn btn-primary add">Add</button>

<div class="new-wrap" style="display: none;">
  <select class="form-control select2">
    <option>test</option>
    <option>test</option>
    <option>test</option>
    <option>test</option>
  </select>
</div>
<div class="main">
  <select class="form-control select2">
    <option>test 1</option>
    <option>test 2</option>
    <option>test 3</option>
  </select>
</div>
<button type="button" class="btn btn-primary add">Add</button>

更新 2 : 在我看来，最好是初始化新元素而不是每次都重新初始化所有元素。

function selectRefresh($sel) {
  $sel.select2({
    tags: true,
    placeholder: "Select an Option",
    allowClear: true,
    width: '100%'
  });
}
$('.add').click(function() {
  var $prnt = $(this).parent();;
  var $clone = $prnt.find('.new-wrap select').clone()
  $prnt.find('.main').append($clone);
  selectRefresh($clone);
});
$(document).ready(function() {
  selectRefresh($('.main .select2'));
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<div>
  <div class="new-wrap" style="display: none;">
    <select class="form-control select2">
      <option>test</option>
      <option>test</option>
      <option>test</option>
      <option>test</option>
    </select>
  </div>
  <div class="main">
    <select class="form-control select2">
      <option>test 1</option>
      <option>test 2</option>
      <option>test 3</option>
    </select>
  </div>
  <button type="button" class="btn btn-primary add">Add</button>
</div>

<div>
  <div class="new-wrap" style="display: none;">
    <select class="form-control select2">
      <option>test</option>
      <option>test</option>
      <option>test</option>
      <option>test</option>
    </select>
  </div>
  <div class="main">
    <select class="form-control select2">
      <option>test 1</option>
      <option>test 2</option>
      <option>test 3</option>
    </select>
  </div>
  <button type="button" class="btn btn-primary add">Add</button>
</div>

Select 2 在通过 jQuery 追加后不起作用

Select 2 is not working after appending through jQuery

html

jquery

jquery-select2