如何根據文本框的值添加多個輸入字段？

我已經創建了一個工作正常的添加輸入字段函數。我想在輸入字段數的基礎上添加許多輸入字段。不幸的是我無法找到適當的結果。這裏是我的JQ代碼如何根據文本框的值添加多個輸入字段？

$(document).ready(function() { 
    var scntDiv = $('#add_words'); 
    var wordscount = 1; 
    var i = $('.line').size() + 1; 

    $('#add').click(function() { 
     var v = $("#inputs").val(); 
     alert(v); 
     wordscount++; 
     $('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" /><a class="remScnt" href="#">Remove</a></div>').appendTo(scntDiv); 
     i++; 
     return false; 
    }); 

    // Remove button 
    $('#add_words').on('click', '.remScnt', function() { 
     if (i > 1) { 
      $(this).parent().remove(); 
      i--; 
     } 
     return false; 
    }); 
});

和HTML代碼也

<select id="inputs" style="width:60px;"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option>      
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
</select> 
<a id="add" href="#">Add</a> 
<div id="add_words"></div>

其實我需要增加投入的多少是我們在id="inputs選擇的基礎上提出。

來源

2012-03-26 Muhammed

像這樣：

$(document).ready(function() { 
    var scntDiv = $('#add_words'); 
    var wordscount = 1; 
    var i = $('.line').size() + 1; 

    $('#add').click(function() { 
     var inputFields = parseInt($('#inputs').val()); 
     for (var n = i; n < inputFields; ++ n){ 
      wordscount++; 
      $('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" /><a class="remScnt" href="#">Remove</a></div>').appendTo(scntDiv); 
      i++; 
     } 
     return false; 
    }); 

    // Remove button 
    $('#add_words').on('click', '.remScnt', function() { 
     if (i > 1) { 
      $(this).parent().remove(); 
      i--; 
     } 
     return false; 
    }); 
});

看到它在這裏的行動： http://jsfiddle.net/zLG7c/6/

來源

2012-03-26 11:49:32

這是工作。你能告訴我一個解決方案，根據從'id =「inputs.'選擇的值固定輸入號碼嗎？'如果你知道感謝您的幫助 – Muhammed 2012-03-26 11:52:15

它從'id =」inputs「'中取值並循環，直到該數字我可能沒有正確地認識到你的問題:) – 2012-03-26 11:55:22

只是得到var'inputFields'的值，像這樣：'parseInt（$（'＃inputs'）.val（））;'。如果選擇2 ，inputFields將保存值2作爲int – 2012-03-26 11:57:30

入住這

HTML

<select id="inputs" style="width:60px;"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option>      
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
    <option>10</option> 
</select> 
<a id="add" href="#">Add</a> 

<div id="add_words"></div>

JQ uery

$(document).ready(function() { 
    var scntDiv = $('#add_words'); 
    var wordscount = 1; 
    var i = $('.line').size() + 1; 
    var counter=1; 
    $('#add').click(function() { 
     var inputFields = parseInt($('#inputs').val()); 

     if(counter>inputFields){ 
      alert("Only "+inputFields+" textboxes allow"); 
      return false; 
    } 



      $('<div class="line">Word is ' + counter+ '<input type="text" value="' + counter+ '" /><a class="remScnt" href="#">Remove</a></div>').appendTo(scntDiv); 

     counter++; 

    }); 

    // Remove button 
    $('#add_words').on('click', '.remScnt', function() { 

     if (counter > 1) { 
      $(this).parent().remove(); 
      counter--; 
     } 
     return false; 
    }); 
});

Sample Fiddle

來源

2012-03-26 12:26:00 Gopesh

如何根據文本框的值添加多個輸入字段？

回答

相關問題