selec2 clone不起作用。

最新推荐文章于 2019-11-27 17:24:53 发布

weixin_30621711

最新推荐文章于 2019-11-27 17:24:53 发布

阅读量98

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gmq-sh/p/4877270.html

本文介绍了一种在使用Select2插件时遇到的问题及解决方案，即如何正确克隆包含Select2下拉框的表格行，并确保克隆后的元素能够正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<table class="table table-bordered">
    <thead>
    <tr>
        <th width ="16%">合同号</th>
    </tr>
    </thead>
    <tbody id="dataList">
            <tr id="1" style="">
                <td class="x-data">
                    <span class="VALUE" data-field="contractId" style="display: none;" data-code=""></span><span style="display: none;" class="SHOW"></span>
                    <select data-type="select" class="form-control x-select2 contract " value="" data-old-value="">
                        <option></option>
                        #foreach($item in $!{result.contracts})
                            <option value="$!{item.contractId}" data-supplierId="$!{item.supplierId}" data-supplier="$!{item.supplier}">$!{item.contractCode}</option>
                        #end
                    </select>
                </td>

　　　　　　　　　　<td>
   　　　　　　　　　　 <a class="btn btn-success btn-xs x-add" href="javascript:void(0)"><i class="fa fa-plus"></i></a>
　　　　　　　　　　</td>

　　　　</tr>

　　　</tbody>
</table>

直接clone()无作用！！

 var firstTR = $("#dataList tr:first");

        $(firstTR).find("td:last").find("a.x-add").click(function(){
            addTR();
        });

function addTR(){

　　var tr = $(firstTR).clone(true);

　　$("#dataList tr").eq(-2).before(tr);

以下的方式可以！！！

function addTR(){
            // call destroy to revert the changes made by Select2
            $("#dataList").find("select").select2("destroy");
            // clone the row and insert it in the DOM
            var tr = $(firstTR).clone(true);
            $("#dataList tr").eq(-2).before(tr);

            // enable Select2 on the select elements
            $("#dataList").find("select").select2();
        }

先destory全部的select2，然后clone，clone之后，再全部激活select2！！！！解决！！！

参考：http://stackoverflow.com/questions/17175534/clonned-select2-is-not-responding

参考例子：

Before you clone the row, you need to disable Select2 on the select element by calling its destroymethod:

destroy

Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.

See http://ivaynberg.github.io/select2/index.html

After you clone the row and insert its clone in the DOM, you need to enable select2 on both select elements (the original one and the new cloned one).

Here's a JSFiddle that shows how it can be done: http://jsfiddle.net/ZzgTG/

Fiddle's code

HTML

<div id="contents">
    <select id="sel" data-placeholder="-Select education level-">
        <option></option>
        <option value="a">High School</option>
        <option value="b">Bachelor</option>
        <option value="c">Master's</option>
        <option value="c">Doctorate</option>
    </select>
</div>
<br>
<button id="add">add a dropdown</button>

CSS

#contents div.select2-container {
    margin: 10px;
    display: block;
    max-width: 60%;
}

jQuery

$(document).ready(function () {
    $("#contents").children("select").select2();
    $("#add").click(function () {
        $("#contents")
            .children("select")
            // call destroy to revert the changes made by Select2
            .select2("destroy")
            .end()
            .append(
                // clone the row and insert it in the DOM
                $("#contents")
                .children("select")
                .first()
                .clone()
        );
        // enable Select2 on the select elements
        $("#contents").children("select").select2();
    });
});

转载于:https://www.cnblogs.com/gmq-sh/p/4877270.html