jQuery création dynamique de champs de saisie en fonction du nombre sélectionné dans un menu déroulant?

Question

Je suis en train d'accomplir quelque chose le long des lignes de celle-ci:

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

Mais ... Je veux afficher un champ de sélection de menu déroulant, avec des valeurs de 1 à 20, et en fonction de la valeur sélectionnée dans se ce champ est combien de champs d'entrée je vais afficher à un utilisateur à remplir sur la page (sans rafraîchir, bien sûr). Donc, si je sélectionne 4 dans la liste déroulante (initialement il n'y a pas de champs d'entrée affichés, comme par défaut devrait être 0), juste en dessous de 4 lignes de champs d'entrée pour le nom & Email doit être créé, le tout avec unique identifiants et autres (pour stocker dans mysql).

Et pour la vie de moi, je ne trouve aucun exemple de quelqu'un qui fait exactement cela, alors j'ai pensé que je présenterais un petit défi ici à la place.

Merci d'avance!

Answer 1

Tout ce que vous avez à faire est de savoir quel numéro est sélectionné lorsque l'utilisateur change la liste déroulante, puis bouclez ce numéro, en créant deux champs de saisie pour chaque itération.

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

Et vous voudrez peut-être même pour le rendre plus intelligent, il vérifie combien de champs de saisie que vous avez déjà, puis d'effectuer autant que nécessaire, ou supprimer certains. De cette façon, ce sera un peu plus rapide (:

Answer 2

Cela insérera une zone de texte après la sélection sur la page. Il se déclenchera chaque fois que le nombre est changé.

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> 

Hope this helps.

Answer 3

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