[英]Cloning select2 options
我正在尝试使用它的选项克隆一个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及其选项。
在克隆之前,请删除跨度标签,然后将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>
克隆之前必须先销毁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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.