Select 2 не работает после добавления через jQuery - PullRequest
Новая
       3

Select 2 не работает после добавления через jQuery

0 голосов
/ 07 июня 2019

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 голосов
/ 07 июня 2019

Инициализируйте плагин select2 только для тегов select в классе .main, в противном случае он будет инициализирован для скрытых элементов и будут некоторые дополнительные теги 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: Если есть несколько мест, чтобы сделать то же самое, выберите те, которые основаны на общем предке или братьях и сестрах.

  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>
...