Abs Abs - 7 days ago 7
Javascript Question

Clonned Select2 is not responding

I am trying to clone a row which contains select2 tool ,when i clone that row using jquery the clonned select2 is not responding.In image given below first select2 which is original is working fine but 2nd and 3rd select2 which are clonned not responding

enter image description here

code snippet:

<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>


jQuery:

$(document).ready(function(){
var clonedRow = $('.parentRow').clone().html();
var appendRow = '<tr class = "parentRow">' + clonedRow + '</tr>';
$('#addRow').click(function(){
$('#test').after(appendRow);
});
});


Any help/suggestion will be appreciable

Answer

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

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