HTMLの入力フォームで、セレクトボックスの値に応じて項目を増やすには

###実現したいこと
HTML5の入力フォームで、「人数」というセレクトボックスで「5人」を選ぶと、氏名を入力する欄が5つ出るように、セレクトボックスの値に応じて、入力項目を自動的に増やしたいと思っています。
JavaScriptやjQueryで解決できそうですが、幾分初心者なもので、どう書けば良いのかよくわかりません。
方法をご存知の方は、ご教授をお願い致します。

###やってみたこと
jquery.add-input-areaなど、ユーザーの操作によって項目を増やすことができるスクリプトはいくつか見つけられましたが、先述の「実現したいこと」に合致するものは見つけられませんでした。

kei344

2016/05/20 20:25

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

ybcsa

2016/05/21 03:30

kei344様アドバイスありがとうございます。今後質問する際は、参考に致します。

行動規範の内容に同意します

回答2件

ベストアンサー

簡単な例だけ。

HTML
1<html>
2  <head>
3    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
4    <script>
5      $(function($) {
6        $('#numSelect').change(function() {
7          $('#inputForms').empty();
8          for(var i = 0; i < $(this).val(); i++){
9            var addForm = $('<input type="text" placeholder="氏名入力">');
10            $('#inputForms').append(addForm);
11          }
12        });
13      });
14    </script>
15  </head>
16  <body>
17   <select id="numSelect" name="numSelect">
18     <option value="1" selected>1人</option>
19     <option value="2">2人</option>
20     <option value="3">3人</option>
21     <option value="4">4人</option>
22     <option value="5">5人</option>
23   </select>
24   <div id="inputForms">
25     <input type="text" placeholder="氏名入力"></input>
26   <div>
27  </body>
28</html>