Question

我需要在带有文本的javascript中创建一个动态字段并选择输入选项。

我在JSFiddle中运行代码，一切都没有问题，但是当我在服务器上运行时，select选项会消失like this screenshot。

这是代码：

HTML

<table id="Campos">
    <th>Cantidad</th>
    <th>Producto</th>
    <th>Unidad</th>
    <th>Cliente</th>
    <th>Añadir campo</th>
    <tr>
        <td>
            <input type="text" id="cantidad" />
        </td>
        <td>
            <select id="productos" />
            <option value="Selecciona el producto" >Selecciona el producto</option>
            <option value="Café en grano"> Café en grano </option>
            <option value="Café en grano 80/20"> Café en grano 80/20 </option>
            <option value="Descafeinado en grano"> Descafeinado en grano </option>
            <option value="Descafeinado sobre"> Descafeinado sobre </option>
            <option value="Azúcar"> Azúcar </option>
            <option value="Edulcorante"> Edulcorante </option>
        </td>
        <td>
            <input type="text" id="unidad" />
        </td>
        <td>
            <input type="text" id="cliente" />
        </td>
        <td id="anadircampo" class="boton-anadir">Añadir campo</td>
    </tr>
</table>

JS

var anadir = 1;
$('#Campos').on('click', '.boton-anadir', function () {
    anadir++;
    var cantidad = "cantidad" + anadir;
    var productos = "productos" + anadir;
    var unidad = "unidad" + anadir;
    var cliente = "cliente" + anadir;
    var nuevoCampo = '<tr><td><input type="text" id=' + cantidad + ' /></td><td><select id=' + productos + ' "<option value="Selecciona el producto">Selecciona el producto</option><option value="Café en grano"> Café en grano </option><option value="Café en grano 80/20"> Café en grano 80/20 </option><option value="Descafeinado en grano"> Descafeinado en grano </option><option value="Descafeinado sobre"> Descafeinado sobre </option><option value="Azúcar"> Azúcar </option><option value="Edulcorante"> Edulcorante </option>" /></td><td><input type="text" id=' + unidad + ' /></td><td><input type="text" id=' + cliente + ' /></td><td id="anadircampo" class="boton-anadir">Añadir campo</td></tr>';
    $('#Campos').append(nuevoCampo);
});

我正在使用CodeIgniter和jQuery 3.2.1。源代码：https://jsfiddle.net/leandroalamino/63fw9oL3/9/

Answer 1

var nuevoCampo = '<tr><td><input type="text" id="' + cantidad + ' "/></td><td><select id="' + productos + '"><option value="Selecciona el producto">Selecciona el producto</option><option value="Café en grano"> Café en grano </option><option value="Café en grano 80/20"> Café en grano 80/20 </option><option value="Descafeinado en grano"> Descafeinado en grano </option><option value="Descafeinado sobre"> Descafeinado sobre </option><option value="Azúcar"> Azúcar </option><option value="Edulcorante"> Edulcorante </option>" /></select></td><td><input type="text" id=' + unidad + ' /></td><td><input type="text" id=' + cliente + ' /></td><td id="anadircampo" class="boton-anadir">Añadir campo</td></tr>';

使用Codeigniter在Javascript中添加带选择选项的行

1 个答案: