Новое добавление поля ввода с выпадающим значением

Question

1. Когда пользователь нажимает кнопку «+», тогда строка должна быть добавлена ​​с раскрывающимся списком и поле ввода. Я хочу сделать это имя поля ввода как выпадающее значение для каждой строки.

2. Если я выбираю «facebook» в первом выпадающем меню, он не должен отображаться во втором раскрывающемся списке. просто выбор значений НЕ должен отображаться в следующем выпадающем списке. Я сделал эту часть. Но мой вопрос: если я выберу «Google» во втором раскрывающемся списке «Yahoo» в третьем выпадающем списке. и снова, если я нажму первый или второй раскрывающийся список, он НЕ должен отображать «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 строки).