禁用已被另一个选择选择的选项（动态添加选择框）

Question

我在禁用已在另一个选择中选择的选项时遇到问题。选择框可以动态添加，无限制。我已尝试使用下面的脚本，但效果不佳。

我有一个这样的表单和脚本

var counteritem = 2;
var usedOptions = [];
function updateCounterItem(isRemove)
{
	if (isRemove)
	{
		counteritem = counteritem - 1;
	} else
	{
		counteritem = counteritem + 1;
	}

	if (counteritem > 1)
	{
		$("button#remove").prop("disabled", false);
	} else
	{
		$("button#remove").prop("disabled", true);
	}
}
$(document).ready(function()
	{
		updateCounterItem(true);
		var counter = 1;
		$('button#add').on('click', function(e)
			{
				e.preventDefault();
				$('div.featured-item').last().clone().appendTo('div#featured-items');
				counter = counter + 1;
				$('.featured-item label').last().replaceWith('<label>Featured #' + counter + '</label>');
				$('.featured-item select').last().attr('id', 'featured' + counter);
				updateCounterItem(false);

				$('.featured-item select').find('option').prop('disabled', false);
				for (key in usedOptions)
				{
					value = usedOptions[key];
					$('.featured-item select').find('option[value="' + value + '"]').prop('disabled', true);
				}
				console.log(usedOptions);
			});
		$('button#remove').on('click', function(e)
			{
				e.preventDefault();
				console.log(usedOptions);
				$('div.featured-item').last().remove();
				counter = counter - 1;
				updateCounterItem(true);
			});
		$(document).on('click', 'select', function()
			{
				$(this).find('option[value="' + $(this).val() + '"]').prop('disabled', false);
			});
		$(document).on('change', 'select', function()
			{
				var thisVal = $(this).val();
				usedOptions = [];
				$('option').prop('disabled', false);
				$('select').each(function()
					{
						var value = $(this).val();
						usedOptions[$(this).attr('id')] = value;
					});
				var value = '';
				for (key in usedOptions)
				{
					value = usedOptions[key];
					$('option[value="' + value + '"]').prop('disabled', true);
					$('#' + key + ' option[value=' + value + ']').prop('disabled', false);
				}
				$(this).find('option[value="' + thisVal + '"]').prop('disabled', false);
				console.log(usedOptions);
			});
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
    <button id="add" class="btn btn-primary"><i class="fa fa-plus-circle"></i> Add item</button>
    <button id="remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i> Remove last item
    </button>
    <hr>
    <div id="featured-items">
        <div class="featured-item form-group">
            <label>Featured #1</label>
            <select id="featured1" name="sort[]" class="form-control featured">
                <option disabled selected>Select one</option>
                <option class="item" value="1">Andy</option>
                <option class="item" value="2">Boss</option>
                <option class="item" value="3">Cindy</option>
                <option class="item" value="4">Drek</option>
            </select>
        </div>
    </div>
</div>

Answer 1

你的代码逻辑有点歪，这应该适合你

var new_id;
var selected_val_arrray = [];
//adding
$(document).on('click', "#add", function() {
  var el = $(".featured-item").last()
  var clone_holder = el.clone(true);

  var current_items_count = $(".featured-item").length
  new_id = current_items_count + 1;

  var select_els = $(".featured_select")
  select_els.each(function() {
    var curr_select_el = $(this);
    var curr_select_el_val = curr_select_el.val();
    selected_val_arrray.push(curr_select_el_val)
  })

  $("#featured-items").append(clone_holder);

  var new_last_featured = $(".featured-item").last()
  new_last_featured.children('label').text('Featured #' + new_id);
  new_last_featured.children('select').attr('id', 'featured' + new_id)

  var selected_val_arrray_length = selected_val_arrray.length
  for (var i = 0; i < selected_val_arrray_length; i++) {
    var select_els = $(".featured_select");
    select_els.each(function() {
      var curr_select_el = $(this);
      var curr_select_el_val = curr_select_el.val()
      
      if(selected_val_arrray[i] != curr_select_el_val)
        {
        curr_select_el.find('option[value="' + selected_val_arrray[i] + '"]').prop('disabled', true);
          }
    })
  }

})

//for disabling
$(document).on('change', ".featured_select", function() {
  var el = $(this);
  var el_id = el.attr('id');

  var el_value = el.val();

  var select_els = $(".featured_select");
  select_els.each(function() {
    var curr_select_el = $(this);
    var curr_select_el_id = curr_select_el.attr('id');
    if (curr_select_el_id != el_id) {
      console.log("dd");
      curr_select_el.find('option[value="' + el_value + '"]').prop('disabled', true);
    }
  })
})

//removing
$(document).on('click', "#remove", function() {
  var el = $(".featured-item").last()
  var el_select = el.children('select');
  var el_select_val = el_select.val();

  console.log(el_select_val);
  var select_els = $(".featured_select")
  select_els.each(function() {
    var curr_select_el = $(this);
    curr_select_el.find('option[value="' + el_select_val + '"]').prop('disabled',false);
  })

  if ($(".featured-item").length != 1) {
    el.remove()
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box-body">
  <button id="add" class="btn btn-primary"><i class="fa fa-plus-circle"></i> Add item</button>
  <button id="remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i> Remove last item
  </button>
  <hr>
  <div id="featured-items">
    <div class="featured-item form-group">
      <label>Featured #1</label>
      <select id="featured1" class="featured_select" name="sort[]" class="form-control featured">
        <option disabled selected>Select one</option>
        <option class="item" value="Andy">Andy</option>
        <option class="item" value="Boss">Boss</option>
        <option class="item" value="Cindy">Cindy</option>
        <option class="item" value="Drek">Drek</option>
      </select>
    </div>
  </div>
</div>