ドロップダウン値で追加する新しい入力フィールド

Question

1. ユーザーが「+」ボタンをクリックすると、ドロップダウンと入力フィールドが追加されます。私は各行のドロップダウン値としてその入力フィールド名を作りたいと思う。

2. 最初のドロップダウンで「facebook」を選択した場合、2番目のドロップダウンリストに表示されません。単純に値を選択すると、次のドロップダウンには表示されません。私はその部分をしました。しかし、私の質問は、2番目のドロップダウンで "Google"を、3番目のドロップダウンで "Yahoo"を選択した場合です。もう一度、最初または2番目のドロップダウンをクリックすると、再び「Yahoo」が表示されません。

コードが存在する場所の下にあるリンクを見つけてください。

http://jsfiddle.net/mhmdsohail/v9uem13u/5/

$(document.body).on('click', '.add-more', function (e) { 
    var lastSelect = $("select").last().find('option'); 
    var toAppend = ''; 
    if (lastSelect.length > 1) { 
     toAppend += '<select name="select[]">'; 
     $.each(lastSelect, function (i, v) { 
      if ($(this).text() !== $("select:last option:selected").text()) 
       toAppend += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>'; 
     }); 
     toAppend += '</select>'; 
     toAppend += '<input type="text" name=""><br>'; 
    } 
    $(".append-select").append(toAppend); 
}); 

Answer 1

このJavaScriptコードは、あなたが求めているものを行います。

（私が理解したものと同様に、現在のすべてのdropdowns（および将来のものから、この削除されます選択したオプション）次の入力フィールドは、最後に選択された値と等しい値を有するname属性を含む。

$(document.body).on('click', '.add-more', function (e) { 
       var lastSelect = $("select").last().find('option'); 
       var selectedOption = $('select:last').val(); 
       var toAppend = ''; 
       if (lastSelect.length > 1) { 
        toAppend += '<select name="select[]">'; 
        $.each(lastSelect, function (i, v) { 
         if ($(this).text() !== $("select:last option:selected").text()) 
          toAppend += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>'; 
        }); 
        toAppend += '</select>'; 
        toAppend += '<input type="text" name="' + selectedOption + '"><br>'; 
       } 
       $(".append-select").append(toAppend); 
       if ($('select:last > option').length > 1) 
         $("select").find('option[value=' + selectedOption + ']').remove(); 
      }); 

可能な限り多くの変更を最小限に抑えようとしました（3行または4行しか編集されませんでした）。