0

Buen día colegas, actualmente estoy haciendo una tabla donde voy agregando dinámicamente Rows al dar clic a un botón, pero el problema es que al principio tengo un select con la propiedad select2, pero cuando agrego un Row dinámicamente con mi botón se agrega el select pero sin la propiedad select2 y quisiera saber la forma de como agregarlo y que traiga select2.

Esta es la forma en la que agrego los Rows a la tabla

function agregaRows() {
    position++;
    $('#tbTablaRecetas')
    .append
    (
        $('<tr>')

        .append
        (
             $('<td>')
             .append
             (
             $('<Select>').attr('id', 'idEAN' + position).addClass('form-control')
             )
         )            
         .append
         (
              $('<td>')
              .append
              (
              $('<input>').attr('type', 'text').attr('id', 'piezas_' + position).addClass('form-control')
              )
         )
         .append
         (
         $('<td>')
              .append
              (
              $('<input>').attr('type', 'text').attr('id', 'ICD_' + position).addClass('form-control')
              )
         )
         .append
         (
              $('<td>')
              .append
              (
              $('<div>').addClass('btn btn-danger').text('Eliminar')
              )
         )
    )
} 

Este es mi body

  <tbody id="tbodyDatos">
                <tr class="tr">
                    <td>
                        <select id="idEAN" class="form-control"></select>
                    </td>

                    <td>
                        @Html.TextBoxFor(model => Model.Unidades, new { @class = "form-control", style = "z-index:0", autocomplete = "off" })
                        @Html.ValidationMessageFor(model => model.Unidades, null, new { @class = "text-danger" })
                    </td>

                    <td>
                        @Html.TextBoxFor(model => Model.ICD, new { @class = "form-control", style = "z-index:0", autocomplete = "off" })
                        @Html.ValidationMessageFor(model => model.ICD, null, new { @class = "text-danger" })
                    </td>

                    <td>
                        <div type="button" class="btn btn-danger">Eliminar</div>
                    </td>

                </tr>
            </tbody>

Y así le indico que el select que trae el id="idEAN" sea select2

 $('#idEAN').select2();

Así se ve cuando trae select 2 el primer registro introducir la descripción de la imagen aquí

Pero cuando agrego un Row ya no se le aplica select2 introducir la descripción de la imagen aquí

3
  • No olvides que los id deben ser únicos, probablemente por eso no se esté aplicando el select2 en la siguiente fila.
    – padaleiana
    el 18 feb. 2022 a las 18:41
  • Por eso le agrego una posicion para que sean diferentes id, pero aun asi no jala amigo @padaleiana el 18 feb. 2022 a las 19:40
  • Amiga* :) ¿Y modificaste $('#idEAN').select2();?
    – padaleiana
    el 18 feb. 2022 a las 19:48

1 respuesta 1

0

Para que te funcione el select2 en cada nueva fila debes decirselo después de hacer el append correspondiente, o bien antes de salir de la función.

Por lo tanto agrega esto justo antes de salir de la función:

$('#idEAN' + position).select2();

Te dejo un snippet funcional para que lo ejecutes y compruebes por ti mismo:

position = 0
function agregaRows() {
  position++;
  $('#tbTablaRecetas')
    .append($('<tr>')
      .append($('<td>')
        .append($('<Select>').attr('id', 'idEAN' + position).addClass('form-control'))
      )
      .append($('<td>')
        .append($('<input>').attr('type', 'text').attr('id', 'piezas_' + position).addClass('form-control'))
      )
      .append($('<td>')
        .append($('<input>').attr('type', 'text').attr('id', 'ICD_' + position).addClass('form-control'))
      )
      .append($('<td>')
        .append($('<div>').addClass('btn btn-danger').text('Eliminar'))
      )
    )
    $('#idEAN' + position).select2();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<table id="tbTablaRecetas">

</table>
<button onclick="agregaRows()">
Agregar fila
</button>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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