javascript - ドロップダウンリストを使用して入力ボックスを動的に追加する

Question

ドロップダウンリストで遊んでいますが、ドロップダウンリストから選択した番号に基づいて入力ボックスを動的に追加するにはどうすればよいのでしょうか。たとえば、1つを選択した場合は、1つの入力ボックスを追加し、2つを選択した場合は、2つの入力ボックスを追加します。ヒントやガイダンスをいただければ幸いですありがとう

Answer 1

jqueryを使用した簡単な方法を紹介します。

html

<select id="dropdown">
  <option value="0">Select number of inputs</option>
  <option value="1">1 input</option>
  <option value="2">2 inputs</option>
  <option value="3">3 inputs</option>
  <option value="4">4 inputs</option>
</select>
<div id="input-holder"></div>​

jquery

$('#dropdown').change(function(){
    if ($(this).val() > 0) {
      $('#input-holder').empty();
      for (i = 1; i <= $(this).val(); i++) {
        $('#input-holder').append('<input type="text" name="input'+i+'" value="' + i +'" >');
      }
    }
});​

もちろん、これは単なる例であり、他の複数の方法で実行できます。