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

Question

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

我在 JSFiddle 中运行代码，一切都没有问题，但是当我在我的服务器上运行时，选择选项消失了，就像这个屏幕截图一样。

这是代码：

.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>';