jQueryで入力ボックスを生成する方法

Question

入力ボックスの行数を定義するドロップダウンボックスがあり、入力ボックスの指定行を生成した後、入力ボックスの各行にドロップダウンボックスを追加すると、以下のように示すか、多くの各行の入力ボックス、定義することができます。

誰もが、この手順のためにスニペットを提案してもらえますか？

おかげ

Answer 1

私はあなたにこのための具体的なスニペットを与えることはありませんが、代わりにあなたにいくつかのヒントを与えるだろう。ここで彼らは、次のとおりです。

1. 例えば（これにはHTML構造を考えてみて分離最初のフォームの残りの部分から選択し、例えば、それはのためのコンテナとして機能しますので、フォームの残りの部分に<div>form-dynamic-fieldsを持つクラスを与えます。動的に生成されたフィールド）、
2. 使用jQueryの.delegate()機能、特定の選択フィールドの選択に応じてイベント（ダイナミックフィールド内の選択ボックスにそれらを委譲）、
3. を添付して追加し、メインを変更するときに、適切な行を（削除または交換します選択フィールドの値）またはフィールド（特定の行の選択値を変更する場合）
4. おそらくonchangeイベントを使用する必要があります。 .delegate()機能の

使用例は、そのようなことができます：

jQuery('.form-dynamic-fields').delegate('select', 'change', function(event){ 
    var fields_in_a_row = jQuery(this).val(); // how many fields in current row 
    // insert or remove appropriate number of fields for current row here 
}); 

、それは限り、クラスform-dynamic-fieldsでコンテナが親要素のままで、削除されないよう、動的に生成されたすべての<select>フィールドのために動作します。

ので、

...あなたは私がしたいあなたは、イベントを添付する方法、フォームを構築することができ、彼らが何をすべき、あなたは何イベントを使用する方法についての手掛かりを、与えられた...ことをお勧めしますさまざまなソリューションをテストし、この問題を解決するために行った進捗状況に関する情報を共有します。

EDIT：

一部実施例（jsFiddleを参照）より多くのあなたを奨励する：

• HTML：

  <form class="form-dynamic" action="" method="post"> 
      <select name="number_of_rows"> 
       <option>0</option> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
      </select> 
      <div class="form-dynamic-fields"> 
  
      </div> 
  </form> 
  

• のJavaScript（onDomReadyを実行）：

  を 0あなたがする必要がどのような

  jQuery('.form-dynamic').delegate('select[name="number_of_rows"]', 'change', function(event){ 
      var field_template = '<input type="text" name="row[]" /><br />'; 
      var howmany = parseInt(jQuery(this).val()); 
      var container = jQuery(this).parent('.form-dynamic').find('.form-dynamic-fields').empty(); 
      if (howmany > 0){ 
       for (i=1; i<=howmany; i++){ 
        container.append(jQuery('<div class="form-dynamic-row"><input type="text" name="rows[' + i +'][]" /> <select name="rows_counts[]" data-row-id="' + i + '"><option>1</option><option>2</option><option>3</option><option>4</option></select></div>')); 
       } 
      } 
  }); 
  
  jQuery('.form-dynamic').delegate('select[name="rows_counts[]"]', 'change', function(event){ 
      var parent = jQuery(this).parent('.form-dynamic-row'); 
      parent.find('input[type="text"]').remove(); 
      var howmany = jQuery(this).val(); 
      var row_id = jQuery(this).attr('row-id'); 
      for (i=1; i<=howmany; i++){ 
       parent.prepend('<input type="text" name="rows[' + row_id + '][' + i + ']" />'); 
      } 
  }); 
  

です：

• は、（そのフィールドは、適切な幅を持っている）、いくつかのスタイルを追加し
• チェックし、最終的にname属性を修正
• 、コードをきれいに<input>フィールド、
• 実装時に発生する可能性のある問題を修正します。

私はそれはあなたがあなたの宿題は、SOコミュニティのための良いことではありませんが、私はこの1つを抵抗できなかったんせない:)

Answer 2

を助け願っています。私の謝罪の人。

オンラインデモ：私は、彼らが行の内部にあるどのように多く依存する入力の幅を取得できませんでしたhttp://jsfiddle.net/E46P5/

var input = '<input type="text" />'; //input html 
var select = '<select>'+ //select html 
        '<option value="0"></option>'+ 
        '<option value="1">1</option>'+ 
        '<option value="2">2</option>'+ 
        '<option value="3">3</option>'+ 
        '<option value="4">4</option>'+ 
        '<option value="5">5</option>'+ 
       '</select>'; 

var row = '<p>'+ input + select + '</p>'; //row html 
var container = $("#container"); //cache selector for better performance 
var i = 0; // variable used in loop 

$("#rowNumber").change(function(){ //when the main select changes 
    var numRows = $(this).val(); //get its value 

    container.html(""); //empty the container 

    for(i=1; i<= numRows; i++){ 
     container.append(row); //and append a row from 1 to the numRows 
    } 
    }); 
    container.delegate('p > select','change',function(){ //when a select inside 
     //a row changes 
     var numInputs = $(this).val(); //get its value 
     var parent = $(this).parent(); //select its parent 
     var width = 170/numInputs; 
     parent.html(""); //empty it 
     for(i=1; i<=numInputs; i++){ 
      parent.append(input); //append an input from 1 to the numINputs 
     } 
     parent.append(select); //and append a select 
    }); 

Althought。

Answer 3

ここでは動作する解決策があります。ここで

はHTMLです：

<select onchange="javascript:local.drop1Change(this);" > 
    <option value="-">select item</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<div id="workArea"></div> 

その後、いくつかのjavascript：

<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    var local = {}; 
    local.changeInner = function (containerId, ctrl) { 
    var target = $("#" + containerId); 
    target.empty(); 
    var len = $(ctrl).val(); 
    for (q = 0; q < len; q = q + 1) { 
     var el = document.createElement("input"); 
     target.append(el); 
    } 
    target.append(ctrl); 
}; 
local.drop1Change = function (ctrl) { 
    var selectedValue = $(ctrl).val(); 
    var len = selectedValue; 
    var area = $("#workArea"); 
    area.empty(); 
    for (x = 0; x < len; x=x+1) { 
     var container = document.createElement("div"); 
     var el = document.createElement("input"); 
     container.id = "container" + x; 
     var s1 = document.createElement("span"); 
     $(s1).html('<select style="margin:2px 2px 2px 2px;"  
     onchange="javascript:local.changeInner(\'' + container.id + '\', this);"> <option value="1" selected>1</option><option value="2">2</option><option value="3">3</option></select>'); 
     $(container).append(el); 
     $(container).append(s1); 
     area.append(container); 
    } 
}; 
</script> 

Answer 4

はここでjQueryを使ってこれを行うには非常にシンプルで効果的な方法です。このコードを使用すると、ドロップダウンメニューのオプションの量を簡単に追加/減らすことができます。また、id /クラス名を他のものに簡単に編集してスタイルを変更することも簡単にできます。これは非常に柔軟な方法です！それはあなたのCSSの幅をスタイルするためにそれらの名前を使用することができますので、あなたが持っている（class = "input-1"またはclass = "input-2"）数に基づいて入力の名前を付けます。

HTML：

<select id="dropdown"><option></option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select> 

<div id="myForm"> 
</div> 

はJQuery：

$(document).ready(function() { 
    $('#dropdown').change(function() { 
     $('#myForm').empty(); 
     for (var i=0; i<$('#dropdown').val(); i++) { 
      $('#myForm').append('<div class="inputGroup"><input type="input" class="input" /><select class="select"><option></option><option value="1">1</option><option value="2">2</option></select></div>');   
     } 
     $('select').bind('change', changeInputs); 
    }); 
}); 

function changeInputs() { 
    var string; 
    string = ""; 
    for (var i=0; i<$(this).val(); i++) { 
     string = string + '<input type="input" class="input-'+$(this).val()+'" />'; 
    }  
    $(this).parents('.inputGroup').html(string + '<select class="select"><option></option><option value="1">1</option><option value="2">2</option></select>'); 
    $('select').bind('change', changeInputs); 
} 

はそれをテストしてお気軽に：http://jsfiddle.net/Ag6GD/2/

がうまくいけば、それはあなたを助けました。