I have a function that creates new elements for me from a table, but the first element is a library that allows me to add multiple selections. When creating a new one in the table it is created but the library is not called, then it is created but the field that is to add the select appears only the list without the library.
I am calling all my libraries in the head.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
This is all my html which is the table with the header and nothing else
<div class="container">
<div class="table-responsive">
<table class="table table-bordered" id="crud_table">
<tr>
<th width="30%">Nombres Completos</th>
<th width="30%">Apellidos</th>
<th width="30%">Documento</th>
<th width="45%">Ciudad</th>
<th width="10%">Opciones</th>
</tr>
<tr>
<td class="name"></td>
<td contenteditable="true" class="lastName"></td>
<td contenteditable="true" class="documento"></td>
<td contenteditable="true" class="state">
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="NY">New York</option>
<option value="ME">Medellin</option>
<option value="CM">Ciudad de Mexico</option>
<option value="WY">Wyoming</option>
</select>
</td>
<td></td>
</tr>
</table>
<div align="right">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">Añadir</button>
</div>
<div align="center">
<button type="button" name="save" id="save" class="btn btn-info">Guardar</button>
</div>
<br />
<div id="inserted_item_data"></div>
</div>
</div>
I have my script inside the same html with the script tag
<script>
$(document).ready(function(){
var count = 1;
$('#add').click(function(){
count = count + 1;
var html_code = "<tr id='row"+count+"'>";
html_code += '<td contenteditable="false" class="name"</td>';
//html_code += "<td contenteditable='true' class='name'></td>";
html_code += "<td contenteditable='true' class='lastName'></td>";
html_code += "<td contenteditable='true' class='nuip'></td>";
html_code += '<td contenteditable="true" class="state">><select class="js-example-basic-multiple" name="states[]" multiple="multiple"><option value="AL">Alabama</option><option value="NY">New York</option></td>';
html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>Eliminar</button></td>";
html_code += "</tr>";
$('#crud_table').append(html_code);
});
$(document).on('click', '.remove', function(){
var delete_row = $(this).data("row");
$('#' + delete_row).remove();
});
$('#save').click(function(){
var name = [];
var lastName = [];
var nuip = [];
var examenes = [];
$('.name').each(function(){
name.push($(this).text());
});
$('.lastName').each(function(){
lastName.push($(this).text());
});
$('.nuip').each(function(){
nuip.push($(this).text());
});
$('.state').each(function(){
examenes.push($(this).text());
});
});
});
</script>
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
you can try to empty the select2 before entering the data or do it later since the select2 takes shape once the page has been loaded and started with the existing elements.
or you can try
If you want to check if it exists before destroying