2

tengo unos selects con estilos y al crear nuevos de forma dinámica con jquery estos no tienen estilo.

Muestra

<table id="tableCreateRule" class="table table-hover">
                 <thead>
                     <tr>
                         <th width="30%">Campo</th>
                         <th width="20%">Operador lógico</th>
                         <th width="20%">Umbral</th>
                         <th width="20%">Operador de unión</th>
                         <th width="10%">Opciones</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
                         <td>
                             <!-- Select rule fields -->
                            <select class="js-example-basic-single" id="ruleField" required>
                                <option value="velocity">Velocidad</option>
                                <option value="batteryState">Porcentaje de batería</option>
                                <option value="boxClosed">Caja cerrada</option>
                            </select>
                         </td>
                         <td>
                             <!-- Select rule logical operator -->
                             <select class="js-example-basic-single" id="ruleLogicalOperator" required>
                                 <option value="<">Menor que</option>
                                 <option value=">">Mayor que</option>
                                 <option value="<=">Menor o igual que</option>
                                 <option value=">=">Mayor o igual que</option>
                                 <option value="=">Igual que</option>
                             </select>
                         </td>
                         <td>
                             <!-- Input rule threshold -->
                             <input type="number" class="form-control" id="ruleThreshold" placeholder="Valor" required />
                         </td>
                         <td>
                             <!-- Select rule merge operator -->
                             <select class="js-example-basic-single"  id="ruleMergeOperator" required>
                                 <option value=""></option>
                                 <option value="and">AND</option>
                                 <option value="or">OR</option>
                                 <option value="follow">FOLLOW</option>
                             </select>
                         </td>
                         <td>
                             <!-- Add new rule -->
                             <button type="button" class="btn btn-default btnAddRule">
                                 <span class="glyphicon glyphicon-plus" style="color:green"></span>
                             </button>
                             <!-- Delete the row -->
                             <button type="button" class="btn btn-default btnDeleteRule">
                                 <span class="glyphicon glyphicon-trash" style="color:red"></span>
                             </button>
                         </td>
                     </tr>
                 </tbody>
             </table>

Con jQuery creo nuevos elementos

$("#tableCreateRule").on("click",".btnAddRule",function () {
    $("#tableCreateRule > tbody:last-child").append(
        '<tr>'
        + '<td> <select class="js-example-basic-single" id="ruleField" required>'
                + '<option value="velocity">Velocidad</option>'
                + '<option value="batteryState">Porcentaje de batería</option>'
                + '<option value="boxClosed">Caja cerrada</option>'
        + '</select> </td>'
        + '<td> <select class="js-example-basic-single" id="ruleLogicalOperator" required>'
                + '<option value="<">Menor que</option>'
                + '<option value=">">Mayor que</option>'
                + '<option value="<=">Menor o igual que</option>'
                + '<option value=">=">Mayor o igual que</option>'
                + '<option value="=">Igual que</option>'
        + '</select> </td>'
        + '<td> <input type="text" class="form-control" id="ruleThreshold" placeholder="Valor" required /> </td>'
        + '<td> <select class="js-example-basic-single"  id="ruleMergeOperator" required>'
                + '<option value=""></option>'
                + '<option value="and">AND</option>'
                + '<option value="or">OR</option>'
                + '<option value="follow">FOLLOW</option>'
        + '</select> </td>'
        + '<td> <button type="button" class="btn btn-default btnAddRule">'
                + '<span class="glyphicon glyphicon-plus" style="color:green"></span>'
            + '</button> '
            + '<button type="button" class="btn btn-default btnDeleteRule">'
                + '<span class="glyphicon glyphicon-trash" style="color:red"></span>'
            + '</button> </td>'
    );
});

Y con esto le doy los estilos a los selects

$(document).ready(function () {
    $(".js-example-basic-single").select2({ width: "100%" });
});
3
  • No uses JS para dar estilos, con CSS cualquier elemento añadido de manera dinámicamente se le aplicarán las reglas de estilo. Tu forma de dar estilo a los selects no sirve porque una vez que termina la función $(document).ready ya no se vuelve a ejecutar para dar estilos a tus selects que vayas añadiendo. Te dejo el JS funcionando: jsfiddle.net/6zfh2h5f
    – Yikarus
    Commented el 9 sept. 2017 a las 14:23
  • Hola @Lixus, pero yo necesito el estilo del select 2 porque en el resto de la página utilizo esos estilos y para que queden todos igual. Commented el 9 sept. 2017 a las 15:27
  • Es lo mismo, aquí en el JS Fiddle no se ve porque no cargo la librería de select2, ni los archivos js ni los estilos, pero si lo aplicas en tu aplicación debe de funcionar
    – Yikarus
    Commented el 9 sept. 2017 a las 15:34

2 respuestas 2

3

Pues la solución esta en llamar a la función de tus estilos nuevamente cada vez que creas un select.

Ejemplo:

$("#tableCreateRule").on("click",".btnAddRule",function () {
$("#tableCreateRule > tbody:last-child").append(
    '<tr>'
    + '<td> <select class="js-example-basic-single" id="ruleField" required>'
            + '<option value="velocity">Velocidad</option>'
            + '<option value="batteryState">Porcentaje de batería</option>'
            + '<option value="boxClosed">Caja cerrada</option>'
    + '</select> </td>'
    + '<td> <select class="js-example-basic-single" id="ruleLogicalOperator" required>'
            + '<option value="<">Menor que</option>'
            + '<option value=">">Mayor que</option>'
            + '<option value="<=">Menor o igual que</option>'
            + '<option value=">=">Mayor o igual que</option>'
            + '<option value="=">Igual que</option>'
    + '</select> </td>'
    + '<td> <input type="text" class="form-control" id="ruleThreshold" placeholder="Valor" required /> </td>'
    + '<td> <select class="js-example-basic-single"  id="ruleMergeOperator" required>'
            + '<option value=""></option>'
            + '<option value="and">AND</option>'
            + '<option value="or">OR</option>'
            + '<option value="follow">FOLLOW</option>'
    + '</select> </td>'
    + '<td> <button type="button" class="btn btn-default btnAddRule">'
            + '<span class="glyphicon glyphicon-plus" style="color:green"></span>'
        + '</button> '
        + '<button type="button" class="btn btn-default btnDeleteRule">'
            + '<span class="glyphicon glyphicon-trash" style="color:red"></span>'
        + '</button> </td>'
);
 $(".js-example-basic-single").select2({ width: "100%" });//nueva linea
});

Entonces solo es añadir $(".js-example-basic-single").select2({ width: "100%" }); en el evento click de tu botón.

Ten en cuenta que todo lo que inicies dentro de $(document).ready(function () {//aqui codigo});, solo se ejecuta una vez y es cuando acaba de cargar el documento, razón por la cual los nuevos selects no tienen estilo alguno.

1

Te dejo un ejemplo, una vez creando dinamicamente le aplicamos una clase de css con .className

for (var i = 0; i < 3; i++) {
  var newDiv = document.createElement('div');
  newDiv.innerHTML = "mundo";
  newDiv.className = 'block';
  document.getElementsByClassName('node')[0].appendChild(newDiv);
}
.block {
  background: red;
}
<div class="node">hola</div>

1
  • Hola @X-rw, yo necesito aplicarle el estilo de select2 porque los utilizo en el resto de la página y tienen que ser todos iguales. Podría conseguir el css del select2 y aplicarlo no? Commented el 9 sept. 2017 a las 15:29

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.