Tengo una función que me crea nuevos elementos de una tabla, pero el primer elemento es una libreria que me permite añadir multiples selecciones. Al momento de crear un nuevo en la tabla se me crea pero la libreria no se llama, entonces se crea pero el campo que es para agregar los select aparece solo la lista sin la libreria.
Todas mis librerias las estoy llamando en el 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>
Este es todo mi html que es la tabla con la cabecera y nada más
<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>
Mi script lo tengo dentro del mismo html con la etiqueta script
<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>