web-dev-qa-db-ja.com

クローンSelect2が応答していません

JQueryを使用してその行を複製すると、select2ツールが含まれている行を複製しようとしていますが、複製されたselect2は応答しません。

コードスニペット：

$(document).ready(function() {
  var clonedRow = $('.parentRow').clone().html();
  var appendRow = '<tr class = "parentRow">' + clonedRow + '</tr>';
  $('#addRow').click(function() {
    $('#test').after(appendRow);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="parentRow" id="test">
  <td>
    <g:message code="educationDetails.educationLevel.label" default="Education Level" />
  </td>
  <td>
    <div style="float: left;">
      <g:select name="degree.id" from="${EducationalDegree.list()}" optionKey="id" optionValue="title" noSelection="['': '']" id="degree" value="${cvEducationDetailCO?.degree?.id}" onchange="changeGradeSelectData(this.value)" />
    </div>
    <div>
      <a href="javascript:void(0)" id="addRow">
        <img alt="" title="Add Additional Education Level" src="/static/images
                                                                /top_submit_1.gif">
      </a>
    </div>
  </td>
</tr>
javascriptjqueryjquery-select2
34
Abs

行を複製する前に、destroyメソッドを呼び出して、select要素でSelect2を無効にする必要があります。

destroy

Select2によって行われたDOMへの変更を元に戻します。 Select2で行われた選択は保持されます。

http://ivaynberg.github.io/select2/index.html を参照してください

行のクローンを作成し、そのクローンをDOMに挿入したら、両方の選択要素（元の要素と新しいクローン要素）でselect2を有効にする必要があります。

以下に、JSFiddleの実行方法を示します。 http://jsfiddle.net/ZzgTG/

フィドルのコード

[〜＃〜] 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();
    });
});
56
Zabbala

クローンを作成する前にまずselect2を破棄する必要がありますが、.select2（ 'destroy'）は機能しません。これを使って：

$myClone = $("section.origen").clone();

$myClone.find("span").remove();
$myClone.find("select").select2();

$("div").append($myClone);
8
amxa

たとえば、クローンを作成する前に、すべてのselect2を最初に破棄する必要があります。

    var div = $("#filterForm div"); 

    //find all select2 and destroy them   
   div.find(".select2").each(function(index)
    {
        if ($(this).data('select2')) {
            $(this).select2('destroy');
          } 
    });

    //Now clone you select2 div 
    $('.filterDiv:last').clone( true).insertAfter(".filterDiv:last"); 

    //we must have to re-initialize  select2 
    $('.select2').select2();
3
Abhinav bhardwaj

テーブルに行を動的に追加しようとしたときに、同じ問題に直面しました。 （行には複数のselect2インスタンスが含まれています。）

私はこの方法でそれを解決しました：

function addrow()
{
    var row = $("#table1 tr:last");

    row.find(".select2").each(function(index)
    {
        $(this).select2('destroy');
    }); 

    var newrow = row.clone();       

    $("#table1").append(newrow);

    $("select.select2").select2();
}

トリックは、行を複製する前に、.select2のすべてのインスタンスを個別に破棄する必要があることです。そして、クローン作成後、.select2を再初期化します。これが他の人にも役立つことを願っています。

3
eheydenr

別のクローン関数を作成することでこれを解決しました：

jQuery.fn.cloneSelect2 = function (withDataAndEvents, deepWithDataAndEvents) {
  var $oldSelects2 = this.is('select') ? this : this.find('select');
  $oldSelects2.select2('destroy');
  var $clonedEl = this.clone(withDataAndEvents, deepWithDataAndEvents);
  $oldSelects2.select2();
  $clonedEl.is('select') ? $clonedEl.select2() :
                            $clonedEl.find('select').select2();
  return $clonedEl;
};
2
jorar91

私はそれでこの問題を解決しました：
新しい行を追加する前にdestroyメソッドを呼び出します

 $(".className").select2("destroy");  //Destroy method , connect with class no ID (recomend)

Select2 jQuery関数を呼び出した後：

$(".className").select2({               
                placeholder: "Example",
                alowClear:true
            });

それが役に立てば幸い ;）

2
praguan

これに答えるために、実際にアカウントを作成しました。

クローンを作成する前に使用すると、これは機能しません：$('.selectpicker').select2('destroy') </ code>

しかし、これは私の場合には機能します：

$('.selectpicker').select2('destroy');
$('.selectpicker')
    .removeAttr('data-live-search')
    .removeAttr('data-select2-id')
    .removeAttr('aria-hidden')
    .removeAttr('tabindex');

Select2が追加するすべての追加属性を削除します。

編集＃1

わかりましたので、select2がselectで見つからない場合、select2が独自の一意のidを追加しようとするため、クローンされている要素からIDを削除する必要があるように見えますが、select同じIDの要素。

1
Volmarg Reiso

そしてもう1つの解決策：

function add_column(copy, paste) {
    $("." + copy + ":first").clone().appendTo("." + paste);
    $("." + paste + " tr:last input").val('');
    $("." + paste + " tr:last select").val('');
    // and etc...

                // Initialize
                $("." + paste + " tr:last select").select2({
                    language: {
                        inputTooShort: function() {
                        return 'Prašome įvesti bent vieną raidę paieškai';
                    }},
                    ajax: {
                        url: base_url+"fuel/Fuel/getWorkersSelect",
                        type: 'POST',
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return {
                                q: params.term, // search term
                                page: params.page
                            };
                        },
                        processResults: function (data, params) {

                            // parse the results into the format expected by Select2
                            // since we are using custom formatting functions we do not need to
                            // alter the remote JSON data, except to indicate that infinite
                            // scrolling can be used
                            params.page = params.page || 1;

                            return {
                                results: data,
                                pagination: {
                                    more: (params.page * 30) < data.total_count
                                }
                            };
                        },
                        cache: true
                    },
                    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                    minimumInputLength: 1,
                    templateResult: formatRepo, // omitted for brevity, see the source of this page
                    templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
                });

    $("." + paste + " tr:last select").last().next().next().remove();

}

function remove_column(e, paste) {
    var how = $("." + paste + " tr").length;
    if (how >= 2) {
        $(e).parent().parent().remove();
    } else {
        $("." + paste + " input").val('');
        $("." + paste + " select").val('');
        // and etc...
    }
}
<table class="table table-striped table-bordered">
                                                                                                            <thead>
                                                                                                                <tr>
                                                                                                                    <th width="15%">Mašina</th>
                                                                                                                    <th width="15%">Išduota</th>
                                                                                                                    <th width="15%">Grąžinta</th>
                                                                                                                    <th width="20%">Vairuotojas</th>
                                                                                                                                                        <th width="10%">Neaktualus</th>
                                                                                                                                                        <th width="15%">Perdavimo aktas</th>
                                                                                                                    <th width="10%">Veiksmai</th>
                                                                                                                </tr>
                                                                                                            </thead>
                                                                                                            <tbody class="paste_place">
                                                                                                                <tr class="copy_item">
                                                                                                                    <td><input type="text" name="masina[]" class="form-control" placeholder="Įveskite..." /></td>
                                                                                                                    <td><input type="text" name="isduota[]" class="form-control datepicker" placeholder="Įveskite..." /></td>
                                                                                                                    <td><input type="text" name="grazinta[]" class="form-control datepicker" placeholder="Įveskite..." /></td>
                                                                                                                    <td>
                                                                                                                                                                        <select class="form-control select-remote-vairuotojai" name="vairuotojas[]">
                                                                                                                                                                                <option value="">Pasirinkite iš sąrašo</option>
                                                                                                                                                                        </select>
                                                                                                                                                        </td>
                                                                                                                                                        <td><input type="text" name="neaktualus[]" class="form-control" placeholder="Įveskite..." /></td>
                                                                                                                                                        <td>haha</td>
                                                                                                                    <td><a onclick="add_column('copy_item', 'paste_place');"><i style="font-size: 20px;" class="icon-plus-circle2"></i></a> &nbsp;<a onclick="remove_column(this, 'paste_place');"><i style="font-size: 20px; color: red;" class="icon-minus-circle2"></i></a></td>
                                                                                                                </tr>
                                                                                                            </tbody>
                                                                                                        </table>
0
Ramas Win

私はこれを作ることを申し出ます、それは私の簡単な例です：

function copy_row(id) {
    var new_row = $("#"+id+" tbody tr:first").clone();
    $("#"+id+" tbody").append('<tr>'+new_row.html()+'</tr>');
    $("#"+id+" tbody tr:last input").val('');
    $("#"+id+" tbody tr:last select").val('');
    $("#"+id+" tbody tr:last input[type='checkbox']").prop('checked', false);

    // Initialize
    $(".select-remote-address:last, .select-remote-address2:last").select2({
        language: {
            inputTooShort: function() {
            return 'Įveskite...';
        }},
        ajax: {
            url: base_url+"index.php/orders/data/getAddress",
            type: 'POST',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {

                // parse the results into the format expected by Select2
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data, except to indicate that infinite
                // scrolling can be used
                params.page = params.page || 1;

                return {
                    results: data,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1,
        templateResult: formatRepo, // omitted for brevity, see the source of this page
        templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
    });

    $(".select-remote-address:last").last().next().next().remove();
    $(".select-remote-address2:last").last().next().next().remove();

    // Datetimepicker
    jQuery('.date_1:last, .date_2:last').datetimepicker({
      i18n:{
        lt:{
         months:[
          'Sausis','Vasaris','Kovas','Balandis',
          'Gegužė','Birželis','Liepa','Rugpjūtis',
          'Rugsėjis','Spalis','Lapkritis','Gruodis',
         ],
         dayOfWeek:[
          "Pir", "An", "Tre", "Ket",
          "Pen", "Šeš", "Sek",
         ]
        }
       },
      format:'Y-m-d H:i',
    });
}
0
Ramas Win

Select2によって管理されるselect入力を複製するために、私にとっては何がうまくいきましたか？
1。複製された選択を破棄する
2。真のパラメーターでクローンする
3。クローン属性「id」および「data-select2-id」から削除します
4。クローンのすべてのオプションから属性 'data-select2-id'を削除します
5。複製された要素を再初期化する
6。値をリセットしてクローン要素を初期化する

次に例を示します。

const Origin = $('select').last(); // last in case there are more than one select
Origin.select2('destroy');
const cloned = Origin.clone(true);
cloned.removeAttr('data-select2-id').removeAttr('id');
cloned.find('option').removeAttr('data-select2-id');
Origin.select2();
cloned.select2().val(null).trigger('change');
0
husky

Jorar91コードの使用方法。

var $clone = $("#multiple_objects_with_select2").cloneSelect2();

$($clone ).find('select').select2({
    width:'100%'
});

$("#some_place").append($clone);
0
Musznik

親divでは、select2を適用しません。まずクローンを作成して変数に保存し、select2を適用します。後で、select2をorigionalに適用し（select2なしのorigionalは変数に保存されているため）、新しく作成されたselectに適用します。私はこの方法を試しましたが、それは機能しています

0
AbdulBasit