zoukankan      html  css  js  c++  java
  • selec2 clone不起作用。

    <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- 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();
        });
    });

      
  • 相关阅读:
    网络最大流算法—最高标号预流推进HLPP
    网络最大流算法—EK算法
    PROPAGATION_REQUIRED
    js左侧三级菜单导航代码
    Ubuntu上用premake编译GDAL
    2013数据结构课程设计之便利店选址(暴力枚举和随机函数两种做法)
    JAVA环境配置
    [K/3Cloud] 如何从被调用的动态表单界面返回数据
    document.getElementsByClassName在ie8及其以下浏览器的兼容性问题
    Java学习笔记51:数组转ArrayList和ArrayList转数组技巧
  • 原文地址:https://www.cnblogs.com/gmq-sh/p/4877270.html
Copyright © 2011-2022 走看看