克隆 select2 选项

Posted 2023-05-07

【中文标题】克隆 select2 选项

【英文标题】：Cloning select2 options

【发布时间】：2019-04-25 21:23:30

【问题描述】：

我正在尝试使用它的选项克隆一个 select2，但它似乎不起作用。

我尝试在重新创建之前销毁，在重新创建之前删除跨度，但没有任何效果。这是基本代码。

html：

<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form_0" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_0">
          <option value="o_test">o_test1_1</option>
          <option value="o_test">o_test1_2</option>
          <option value="o_test">o_test1_3</option>
        </select>
        <select class="select2" name="test2" id="test2_0">
          <option value="o_test">o_test2_1</option>
          <option value="o_test">o_test2_2</option>
          <option value="o_test">o_test2_3</option>
        </select>

        <button onclick="addRow()">clone</button>
      </form>
    </div>
  </div>
</div>

javascript：

function addRow() 
  var div = $('div[id^="row"]:last');
  var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
  var clone = div.clone().prop('id', 'row_'+num );

  div.after( clone );


$(".select2").select2();

这是一个包含我的问题的小提琴： https://jsfiddle.net/L5mn63g7/25/

那么知道问题可能是什么吗？为了能够使用它的选项克隆 select2。

【问题讨论】：

Cloned Select2 is not responding的可能重复

@SvenHakvoort 有很多主题都在谈论这个问题，但每个主题都不同，没有一个真正提出解决我的问题的方法，如果您认为该链接解决了我的问题，请随时向我展示如何作为我无法 =) 但感谢您的评论。

【参考方案1】：

在克隆之前删除 span 标签并将 select2 重新绑定到克隆的下拉列表。

希望对你有帮助。

function addRow() 
  var div = $('div[id^="row"]:last');
  var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
  var clone = div.clone().prop('id', 'row_'+num );
  clone.find('[id]').each(function()var $this = $(this); $this.prop('id', $this.prop('id').split('_')[0] + '_' + num););
  clone.find("span").remove();
	clone.find(".select2").select2();
  clone.find(".select2-container").css("width","300px")
  div.append( clone );
  


$(".select2").select2();

select 
  width: 300px;

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form_0" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_0">
          <option value="o_test">o_test1_1</option>
          <option value="o_test">o_test1_2</option>
          <option value="o_test">o_test1_3</option>
        </select>
        <select class="select2" name="test2" id="test2_0">
          <option value="o_test">o_test2_1</option>
          <option value="o_test">o_test2_2</option>
          <option value="o_test">o_test2_3</option>
        </select>

        <button onclick="addRow()">clone</button>
      </form>
    </div>
  </div>
</div>

【参考方案2】：

您必须在克隆之前先销毁 select2 并将 select2 的选择器名称更改为其他名称。这是有效的解决方案

function addRow() 
  $('.items').select2("destroy");
  var div = $('div[id^="row"]:last');
  var num = parseInt(div.prop("id").match(/\d+/g), 10) + 1;
  var $clone = div.clone().prop('id', 'row_' + num);
  $clone.find('[id]').each(function() 
    var $this = $(this);
    $this.prop('id', $this.prop('id').split('_')[0] + '_' + num);
  );

  div.after($clone);
  $('.items').select2();


$(".items").select2();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>

<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form_0" onsubmit="return false;">
        <select class="items" name="test1" id="test1_0">
          <option value="o_test">o_test1_1</option>
          <option value="o_test">o_test1_2</option>
          <option value="o_test">o_test1_3</option>
        </select>
        <select class="items" name="test2" id="test2_0">
          <option value="o_test">o_test2_1</option>
          <option value="o_test">o_test2_2</option>
          <option value="o_test">o_test2_3</option>
        </select>

        <button onclick="addRow()">clone</button>
      </form>
    </div>
  </div>
</div>