jQuery dynamische Erstellung von Eingabefeldern auf der Grundlage der Anzahl in einem Dropdown-Menü ausgewählt?

Question

Ich versuche, etwas entlang der Linien von um dies zu erreichen:

http://devblog.jasonhuck.com/assets/infiniteformrows.html

Aber ... Ich möchte ein Drop-Down-Auswahlfeld angezeigt werden, mit den Werten 1 bis 20, und je nachdem, welcher Wert in ausgewählten wird In diesem Feld werden so viele Eingabefelder angezeigt, die ein Benutzer auf der Seite ausfüllen muss (ohne natürlich zu aktualisieren).

Also, wenn ich 4 in der Dropdown-Box auswählen (zunächst gibt es keine Eingabefelder gezeigt, wie der Standardwert 0 sein soll), direkt unterhalb es 4 Zeilen von Eingabefeldern für Namen & E-Mail erstellt werden soll, alle mit einzigartigem Bezeichner und so (zum Speichern in mysql).

Und für das Leben von mir, kann ich keine Beispiele von jemandem finden, der genau das tut, also dachte ich, ich würde stattdessen eine kleine Herausforderung präsentieren.

Vielen Dank im Voraus!

Answer 1

Sie müssen nur herausfinden, welche Nummer ausgewählt ist, wenn der Benutzer die Dropdown-Liste ändert, und dann diese Nummer durchlaufen, um für jede Iteration zwei Eingabefelder zu erstellen.

$("#selectBox").change(function() { 
    var htmlString = ""; 
    var len = $("options:selected", this).val(); 
    for (var i = 0; i < len; i++) { 
    htmlString += "<input type='text' class='email'>"; 
    htmlString += "<input type='text' class='name'>"; 
    } 
    $("#outputArea").html(htmlString); 
} 

und Sie vielleicht sogar schlauer machen wollen es, so ist es, wie viele Eingabefelder überprüft Sie bereits haben, und dann nur so viele wie nötig machen, oder einige entfernen. Auf diese Weise wird es ein bisschen schneller sein (:

Answer 2

Dies wird ein Textfeld nach der Auswahl auf der Seite einfügen. Es wird jedes Mal ausgelöst, wenn die Nummer geändert wird.

var idFun = 0; 
$('select').change(function() { 
    var end=$(this).val(); 
    for (var i=0;i<end;i++) { 
    $('<div><input id="fun' + (idFun++) + ' type="text" ></div>').appendTo($('#myinputs')); 

    } 
}); 

HTML:

<select> 
    ... 1 to 20 here 
</select> 
<div id="myinputs"></div> 

Hoffnung, das hilft.

Answer 3

Die wirkliche sollution:

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#AantalAntw").change(function() { 
      var htmlString = ""; 
      var len = $("#AantalAntw").val(); 
      for (var i = 0; i < len; i++) { 
       htmlString += "<input type='text' class='email'>"; 
       htmlString += "<input type='text' class='name'>"; 
      } 
      alert(htmlString); 
      $("#antwblok").html(htmlString); 
     }); 
    }); 

</script>