2009-07-21 12 views
1

は、私はこの線に沿って何かを達成しようとしています:jQueryドロップダウンメニューで選択した番号に基づいて入力フィールドを動的に作成しますか?

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

をしかし...私はドロップダウン選択フィールドを表示したい場合、値は1〜20であり、値が選択されますこれに応じて、そのフィールドは、ページに記入するためにユーザーに表示する入力フィールドの数です(もちろん、リフレッシュせずに)。だから、

、私は名前&メールの入力フィールドの4行を作成する必要があります右のそれの下に、(最初はデフォルトは0でなければなりませんよう、示されても入力フィールドが存在しない)ドロップダウンボックスで4を選択した場合、ユニークですべての識別子など(mysqlに格納するため)。

私の人生にとっては、まさにそれをやる人の例は見つからないので、ここで少し挑戦したいと思っていました。

ありがとうございます!

答えて

3

ユーザがドロップダウンを変更したときに選択されている番号を見つけ出し、その番号をループして、繰り返しごとに2つの入力フィールドを作成します。

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

そしてあなたも、それはあなたが既に持っているどのように多くのフィールドの入力をチェックして、賢くそれ行い、その後、必要に応じてのみなど、多くを作る、または一部を削除したい場合があります。そうすれば、それは(少し速くなります。

1

これは、ページの選択後にテキストボックスを挿入します。番号が変更されるたびに発生します。

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> 

・ホープ、このことができます。

0

本当の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> 
関連する問題