Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cloned Select2 is not responding

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

code snippet:

$(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>
like image 730
Abs Avatar asked Jun 18 '13 17:06

Abs


People also ask

How do I reset Select2?

In order to clear the selection of those values which are selected using a Select2 drop down,we can use the empty() function. The dropdown can be reset using Jquery. $("#select2_example"). empty();

How do I know if Select2 is open?

select2:open is fired whenever the dropdown is opened. select2:opening is fired before this and can be prevented. select2:close is fired whenever the dropdown is closed. select2:closing is fired before this and can be prevented.

What does Select2 () do?

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.


Video Answer


2 Answers

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();     }); }); 
like image 61
Zabbala Avatar answered Sep 28 '22 03:09

Zabbala


you have to destroy select2 first before cloning, but .select2('destroy') not works. Use this:

$myClone = $("section.origen").clone();  $myClone.find("span").remove(); $myClone.find("select").select2();  $("div").append($myClone); 
like image 45
amxa Avatar answered Sep 28 '22 01:09

amxa