通过jQuery附加后，Select 2无法正常工作

时间：2019-06-07 06:13:19

标签： jquery html jquery-select2

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>

1 个答案:

答案 0 :(得分：0)

仅对select类中的.main标签初始化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：：如果有多个相同的地方，则根据共同的祖先或兄弟姐妹来选择。

  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>

相关问题
最新问题