添加下拉值的新輸入字段

Question

1. 當用戶單擊「+」按鈕時，應添加一個帶有下拉和輸入字段的行。我想將該輸入字段名稱作爲每行的下拉值。

2. 如果我在第一個下拉列表中選擇「臉譜」，它不應該顯示在第二個下拉列表中。只需選擇值不應顯示在下一個下拉列表中。我完成了這部分。但我的問題是如果我在第二個下拉列表中選擇「Google」，在第三個下拉列表中選擇「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，其值等於最後選擇的dropdown選項）

$(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行）。