は、私は、テキストを選択し、入力オプションでJavaScriptで動的なフィールドを作成する必要がCodeIgniterの

Question

とJavaScriptでの選択オプションを使用して行を追加します。

私はJSFiddleでコードを実行し、すべてが問題なくなりますが、私は自分のサーバー上で実行すると、選択オプションが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>';