时间戳

首页 > 解决方案 > 通过 jQuery 追加后选择 2 不起作用

jquery - 通过 jQuery 追加后选择 2 不起作用

问题描述

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

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

找到下面的代码

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>

标签： jqueryhtmljquery-select2

解决方案

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

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：如果有多个地方可以做同样的事情，那么选择那些基于共同祖先或兄弟姐妹的地方。

  1. 使用共同的父元素：

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>

  1. 通过选择前一个兄弟元素：

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>

推荐阅读