0

Comunidad,

Tengo el siguiente input select

<td style="width: 380px;">
    <select id="proveedor" class="form-control proveedor" onchange="proveedorSeleccionado(this)" style="width:380px">
        <option value=""><?= T::trans('Seleccione un proveedor') ?></option>
            <? if ($proveedores != null && is_array($proveedores) && count($proveedores) > 0) {
                foreach ($proveedores as $p) { ?>
                <option value="<?= $p->id ?>"><?= $p->dato ?></option>
            <?  }
        } ?>
    </select>
</td>

a este le aplico la libreria select2 para poder buscar dentro de el con el siguiente codigo:

$('.proveedor').select2();

a parte a ello tengo un botón que se llama añadir:

<tr id="boton">
    <td colspan="5" style="text-align: right !important;">
        <span class="iconoGris" onclick="nuevafilaProveedores(this)" style="left: 1210px;top: 579px;background: #F5333F;border-radius: 4px;color: white;float: right;margin-top: 10px;margin-right: 10px; margin-bottom: 10px;">
        <i class="pM fa fa-plus" title=" <?= T::trans('Añadir fila') ?>">
        <font class="" style="font-weight: 100;"> <?= T::trans('AÑADIR') ?></font>
        </i>
        </span>
    </td>
</tr>

este duplica el input con el siguiente codigo:

function nuevafilaProveedores() {
        
        var table = document.getElementById("tablaProveedores");
        var row = table.insertRow(table.rows.length-1);
        var cell1 = row.insertCell(0); cell1.align="center"; cell1.style.width="380px";
        var cell2 = row.insertCell(1); cell2.align="center"; cell2.style.width="260px";
        var cell3 = row.insertCell(2); cell3.align="center";
        
        //var cell4 = row.insertCell(3); cell3.align="center";
        cell1.innerHTML = '<select id="proveedor2" class="form-control proveedor2"  onchange="proveedorSeleccionado(this)"><option value=""><?= T::trans('Seleccione un proveedor') ?></option><? if ($proveedores != null && is_array($proveedores) && count($proveedores) > 0) { foreach ($proveedores as $p) { ?><option value="<?= $p->id ?>"><?= $p->dato ?></option><?    }} ?></select>';
        cell2.innerHTML = '<select onchange="nuevoContacto(this);" class="form-control"><option value=""><?= T::trans('Seleccione un contacto') ?></option><option value="-1"><?= T::trans('Nuevo contacto...') ?></option></select>';
        //cell3.innerHTML = '<span id="trash" class="pM" title="<?= T::trans('Añadir contacto') ?>" onclick="nuevaSubfilaProveedores(this)"><i class="pM fas fa-plus" style="color: black; zoom: 1.3; " title="<?= T::trans('Añadir contacto') ?>"><font class="textoBoton"></font></i></span>';
        cell3.innerHTML = '<span id="trash" class="pM" title="<?= T::trans('Eliminar') ?>" onclick="eliminafila(this,'+"'tablaProveedores'"+')"><i class="pM fa fa-trash" style="color: black; content: url(/content/imgs/Eliminar.svg); width: 15px;" title="<?= T::trans('Borrar') ?>"><font class="textoBoton"></font></i></span>';
        //$('.proveedor2').select2();
        
    }

el inconveniente es que no me aplica la libreria select2 en los duplicados ya que identifique que el id del input lo repite, intente aplicar el select2 con la clase pero igual no me aplica el select2. Pero al cambiarle el id a proveedor2 y aplicar el select2 si me funciona pero solamente en 1. lo que requiero es que en todos los input que duplique se aplique la libreria select2, dejo una imagen mostrando la primera funcionando y otra mostrando que la propiedad no se aplica a todos los input select con el mismo id

introducir la descripción de la imagen aquí

y la siguiente muestra que los dos input siguientes no funcionan pero el 3 si funciona.

introducir la descripción de la imagen aquí

Lo que requiero es que al dar añadir sin importar cuantos input select cree se le aplique la libreria select2

Espero hacerme entender y cualquier opinion u ayuda sera tenido en cuenta,

Cordialmente.

1 respuesta 1

1

Como concepto, nunca dupliques id= pues solo puedes obtener resultados inesperados.

Creo que la solución ya la tenias, pero diría que te has hecho un lio con los ids y has confundido las cosas.

Simplemente cambia la clase proveedor2 de aquí:

cell1.innerHTML = '<select id="proveedor2" class="form-control proveedor2" 

por proveedor de este modo (y quita el id, no sirve para nada en este contexto ahora mismo):

cell1.innerHTML = '<select class="form-control proveedor" 

y donde has puesto esto:

//$('.proveedor2').select2();

lo cambias por esto:

$('.proveedor').select2();

y ya te debería funcionar bien.

Ya nos cuentas si ahora si te funciona.

1
  • muchas gracias por tu respuesta me estaba ahogando en un vaso de agua me enrede con los id. Me ayudaste a orientarme. Muchas gracias funciono de manera correcta segpun lo esperado Commented el 1 jul. 2022 a las 15:35

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.