通过 jQuery 追加后选择 2 不起作用答案

【问题标题】：Select 2 is not working after appending through jQuery通过 jQuery 追加后选择 2 不起作用
【发布时间】：2019-06-07 06:13:19
【问题描述】：

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>

【问题讨论】：

“它不能正常工作”没有帮助。请描述您希望看到的内容以及您看到的不正确行为。（话虽这么说，这个问题可能与$(.select2)返回多个对象有关）
我看到了什么行为，你不能试试我发布的代码......如果你真的想修复它，你可以尝试代码，否则离开它
阅读您问题的人不是读心者。他们不知道他们看到的行为是否是你想要的。您需要解释问题所在，而不是仅仅说“它无法正常工作”
查看下面的答案 100% 正确。那些真正感兴趣的人会先尝试代码，如果他们遇到任何问题，然后提出问题......我已经发布了完整的代码你会尝试一次然后你会以任何方式了解确切的问题谢谢

标签： jquery html jquery-select2

【解决方案1】：

只为.main类中的select标签初始化select2插件，否则它将为隐藏元素初始化，并且会有一些额外的由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：如果有多个地方可以做同样的事情，那么选择那些基于共同祖先或兄弟姐妹的地方。

使用公共父元素：

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>

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

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>

【讨论】：

您好，非常感谢您在其他地方我正在使用相同但它来了两次一个正在工作另一个处于禁用模式你能帮我吗
它实际上在 laravel 中，所以我刚刚创建了一个新文件并发布了上述内容
我也试过它带有 2 个选择选择器，一个正在工作，另一个没有
无论如何，谢谢我得到了解决方案，因为代码混乱，并再次调用在不同的地方选择它现在无法正常工作