0

ユーザー入力を通じて入力フィールドを動的に生成しました。フォームが保存されません。すべての入力フィールドから値を取得し、ドロップダウン選択ボックスに入力する必要があります。

また、それを行う他の方法はありますか？これはこれを行う正しい方法ですか？

4

3 に答える 3

0

ページが動的に生成されていない場合は、最初にすべての入力を取得する必要があります。動的に生成されている場合、dom ノードは既にオブジェクトに格納されているはずです。

ページに複数の入力セクション (動的に生成されない) があり、それぞれに id が示されているとします。

<div class="formSection" id="dropDownEntry">
    <label for="dropDown1">Drop1</label>
    <input id="dropDown1"></input>
    <label for="dropDown2">Drop1</label>
    <input id="dropDown2"></input>
</div>

フィールドを取得するときは、可能であれば 1 つの DOM ルックアップのみを実行する必要があります。したがって、親ノードを取得してから、jquery または js に「input」のタグを持つ子を取得するように指示します。 

var dropDownInputsArray = $('#dropDownEntry').find('input');

これで、入力の配列ができて、それをグローバル スコープ外の関数内に格納できました。$.each は使用しないでください。地獄のように遅いので、それは悪い習慣です。私は文字通りそれを使用することはありません。これまでに、回避するのは難しくありません。dom ノードの配列を反復処理し、次のように init で長さをキャッシュしてください。

for(i=0, len=dropDownInputsArray.length; i < len; i++){

}

しかし、WAIT、最初に非グローバルスコープのノードを作成して、選択したノードを格納する必要があるため、dom に繰り返し追加することはありません。ゲームの名前は「DON"T TOUCH THE GD DOM」です。 

var mySelectNode = $('<select/>');
//len caches the length so you don't have to look it up each time.  Performance ++
 for(i=0, len=dropDownInputsArray.length; i < len; i++){
      var inputNodeVal = dropDownInputsArray[i].value;
      if(inputNodeVal.length > 0) //was anything entered there?
        mySelectNode.append($('<option/>', {
                   value: inputNodeVal,
                   text: inputNodeval
               }));
 }

//now append your mySelectNode to the dom or replace the previous select node with it.  We did it this way because before you actually attach a node to the dom you have stayed in javascript land which is 'cheaper' than touching dom-land.
于 2013-11-11T05:28:08.807 に答える
0

次のように、同じクラスの input 要素の値を select 要素に追加できます。

$("input.className").each(function (index,element)
{
    var inputVal = $("element").val();
    $("select").append('<option>'+inputVal+'</option');
});
于 2013-11-11T05:02:32.793 に答える