複数の入力を選択メニューに挿入

Question

入力フィールドを1つ使用して<select><option>を入力しようとしています。注意しなければならないのは、選択肢に複数の入力を追加したいのですが、複数の入力を追加するのは苦労しています。説明するのは難しいですが、流れはチーム名を入力に追加してドロップダウンに表示され、ユーザー/メンバーを選択します。

これは、複数のフィールドを追加します。ここでは

は、私は現在、これをやっている方法です。

<div class="multi-field-wrapper"> 
     <div class="multi-fields"> 
     <div class="multi-field"> 
      <input type="text" name="teamName" id="teamName"> 
      <button type="button" class="remove-field">Remove</button> 
     </div> 
     </div> 
     <button type="button" class="add-field">Add field</button> 
    </div> 

フィールドからの入力は、その後、次のフィールドに移入：

<label>Select Team</label> 
     <select id="teamList"> 
    </select> 

をそしてこれがそうのように扱われる：

$('#teamName').on('change', function() { 
    var $selectEl = $('#teamList'); 
    var $dashboardOption = $selectEl.find('.team-name'); 
    if ($dashboardOption.size()) { 
     $dashboardOption.attr('value', $(this).val()).text($(this).val()); 
    } else { 
     $selectEl.append('<option class="team-name" value="' + $(this).val() + '">' + $(this).val() + '</option>'); 
    } 
    }); 

私の質問をここにある、どのように私は複数の入力を挿入します上記の選択/オプションに入れますか？それも可能ですか？

Answer 1

現時点では、変更イベントは1つの入力エレメントにバインドされ、idは "teamName"です。

HTML：：

<input type="text" name="teamName" class="teamInputs"> 

あなたはこの機能を実行する複数の入力ボックスを持ってしようとしている場合は、イベントが、それらのすべてに、このような何かをバインドされているように、あなたは、このクラスを使用することができます

JS：このコード彼らはまだ存在しない場合でも、変更イベントがクラス「teamInputs」を持つすべての入力にトリガーされるように、私は、委任イベントの構文を使用しました

$(document).on('change', '.teamInputs', function() { 

注意、実行されます。