将下拉菜单添加到我的动态表单jQuery中

Question

我正在创建一个动态表单，用户可以在其中动态添加元素。我可以允许他们添加文本框，但是我不确定如何将我的下拉菜单添加到其中。这是我的jQuery代码

var addDiv2 = $('#addIngredient');
    var i = $('#addIngredient p').size() + 1;
    $('#addNewIngredient').on('click', function () {
        $('<p> <input id="ingredient_' + i + '"  name="ingredient[]" type=text"
           value="" placeholder="Ingredient" /> 
           <input id="quantity_' + i + '" 
           name="quantity[]" type=text" value="" placeholder="Quantity" /> 
          <input id=alternative_' + i + '" name="alternative[]" type=text" 
          value"" placeholder="Alternative Ingredient" /> 
          <a href=#" class="remNew2"> Remove </a> </p> ').appendTo(addDiv2);

这是我的网页

<div id="addIngredient">
<p>
<input type="text" id="ingredient_1" name="ingredient[]" value="" 
    placeholder="Ingredient"/>
<input type="text" id="quantity_1" name="quantity[]"  value="" 
placeholder="Quantity"/>
<input type="text" id="alternative_1" name="alternative[]"  value="" 
placeholder="Alternative Ingredient"/>
<select id="selectQuantity_1" name="quantityType[]">
 <option value="grams">Grams</option>
 <option value="ounces">Ounces</option>
 <option value="Pounds">Pounds</option>
 </select>
<a href="#" id="addNewIngredient">Add</a>

我已经尝试过但无法解决，帮助将不胜感激！

这是 jsFiddle http://jsfiddle.net/3yFFr/

忽略我粘贴的jQuery下面的位，我必须将其全部粘贴才能正常工作。

Answer 1

您似乎正在克隆div 中的元素。我建议您继续使用.clone()方法来执行此操作。

查看非常简单的代码。 现在，您可以在此处删除添加元素并将其更改为删除。

$('#addIngredient').clone()
           .prop('id', 'addIngredient1').appendTo('ingredDiv');

JSFiddle

除非有必要，否则也尽量避免使用id。

Answer 2

如果您想在每次"添加"单击时添加一行，那么我会尝试这样的事情：

var addDiv2 = $('#addIngredient');
var formRow = addDiv2.find('p');
$('#addNewIngredient').on('click', function () {
    formRow.clone(true, true).appendTo(addDiv2);
});

有关工作示例，请参阅此jsFiddle。

编辑：由于您需要检查您的ID，因此我设置了一些应该有效的东西，

jsFiddle 包括：

var addDiv2 = $('#addIngredient');
$('#addNewIngredient').on('click', function () {
    // Clone the last input row, keeping the event handlers
    var clonedRow = $('#addIngredient p').last().clone(true, true);
    // We're going to examine all select and input elements
    var all = clonedRow.find('select, input');
    // A regular expression we can use to test if the id has numbers at the end
    var numericPostfix = /d+$/;    
    for (var i = 0; i < all.length; i++) {
        var curr = $(all[i]);
        // If current element has an id attribute
        if (curr.attr('id') != undefined) {
            var id = curr.attr('id');
            // Rips off any trailing digits in element's id
            var idNum = numericPostfix.exec(id);
            // Exec gives an array of matches, if it's not null, choose the first match
            if (idNum) {
                 idNum = idNum[0];
            }
            if (idNum) {            
                // Chop off last character
                id = id.slice(0, (-1 * idNum.length));
                // Increment and add the id number to the nextId
                var nextId = id + (Number(idNum) + 1);
                // Set the id attribute to nextId
                curr.attr('id', nextId); 
            }
            // Append to the DOM
            clonedRow.appendTo(addDiv2);
        }
    }
});

Answer 3

在你的代码中，你没有将选择菜单添加到你附加的jQuery中。看：

 $('<p> <input id="ingredient_' + i + '"  name="ingredient[]" type=text" value="" 
 placeholder="Ingredient" /> 
 <input id="quantity_' + i + '" name="quantity[]" type=text" value="" 
   placeholder="Quantity" /> 
 <input id=alternative_' + i + '" name="alternative[]" 
   type=text" value"" placeholder="Alternative Ingredient" /> 
 <a href=#" class="remNew2"> Remove </a> </p> ').appendTo(addDiv2);