Wie Sie mehrere Eingabefelder basierend auf Textfeld Wert hinzufügen?

Question

Ich habe eine Add-Eingabefeld-Funktion erstellt, die gut funktioniert. Ich möchte gerne viele Eingabefelder auf Basis der Eingabefeldnummer hinzufügen. Ich starte gerade leider konnte kein passendes Ergebnis dafür finden. hier ist mein JQ Code

$(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; 
    }); 
}); 

und HTML-Code auch

<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> 

Eigentlich muss ich Eingabe auf der Grundlage von eingereichten hinzufügen, wie viel ist, dass wir in der id="inputs wählen.

Answer 1

So:

$(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; 
    }); 
}); 

es in Aktion Siehe hier: http://jsfiddle.net/zLG7c/6/

Answer 2

prüfen diese

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