0

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>

1 respuesta 1

2

puedes probar a vaciar el select2 antes de meter los datos o hacerlo después ya que el select2 coge forma una vez se ha cargado la página e iniciado con los elementos existentes.

$('.select').empty();
$('.select').select2({
    data: data.slots
});

o bien puedes probar

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

$("select").select2();

Si quieres comprobar si existe antes de destruir

if ($('select').data('select2')) {
   $('select').select2('destroy');
 }

$(document).ready(function(){
 var count = 1;
 $('#add').click(function(){
 $(".js-example-basic-multiple").select2("destroy");
  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);
   
   

$(".js-example-basic-multiple").select2();
 });
 
 $(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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>test</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<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>
  
  <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>

</body>
</html>

2
  • estuve probando los scripts y no me funcionarón, no sé si los tenia que poner en un lugar especifico. Commented el 17 may. 2022 a las 20:46
  • Hola,he editado la respuesta, he colocado en el agregar al principio del todo, la función para destruir el select2, hace la copia y luego lo vuelve a crear vinculándolo a la clase y ya lo tienes
    – ciberelfo
    Commented el 18 may. 2022 a las 7:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.