在JavaScript中用选择选项添加行Codeigniter

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); 
}); 

我使用笨和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>';