如何根据文本框的值添加多个输入字段？

我已经创建了一个工作正常的添加输入字段函数。我想在输入字段数的基础上添加许多输入字段。不幸的是我无法找到适当的结果。这里是我的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

如何根据文本框的值添加多个输入字段？

回答

相关问题