how to change a select options dynamically based on other select options in JQuery?

Question

Please see the image of the HTML selects

The idea here: if the user chooses "A" in the first HTML select list, "A" should not appear in the other HTML select lists. This should be dynamically updated in all lists even if the user begin to choose in one of the Select lists in the middle. The code below is a partial imperfect incomplete solution. I think it is repetitive. What I want to do is to keep deducing options from HTML Select lists until if the user reaches the last Select, only one option remains.
The Selects have ids "1", "2" etc...
I have the following JQuery code:

    <script>
    $(document).ready(function () {
    $("#1").change(function () {
     var val = $(this).val();
    if (val == "A") {
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>");
    } else if (val == "B") {
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>");
    } else if (val == "C") {
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A'>A</option><option value='B'>B</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>");
    } else if (val == "D") {
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>");
    } else if (val == "E") {
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>");
    } else if (val == "F") {
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>");
    } else if (val == "G") {
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option>");
    } else if (val == "H") {
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='I'>I</option><option value='J'>J</option>");
    } else if (val == "I") {
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='J'>J</option>");
    } else if (val == "J") {
    $("#2,#3,#4,#5,#6,#7,#8,#9,#10").html("<option value='A' >A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option>");
    }
    // end of ("#1").change JQUERY Function
    });
    //end of .ready JQuery Function
    });   

    </script>

Any ideas that are easy would be greatly appreciated. Thanks in advance for any help.

Answer 1

I see I've been beaten to it. Here's my solution anyway.

However, this solution requires an O(n) operation every time something is selected to generate the array of "used" values, which isn't ideal.

$("#row1 > select").change(function() {
  var selected = [];
  $('#row1 > select').each(function() {
    selected.push(this.value);
  });
  $("#row1 > select option").prop('disabled', false);
  $.each(selected, function(index, value) {
    $("#row1 > select option[value='" + value + "']").prop('disabled', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="row1">
  <select>
    <option disabled selected value>--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <select>
    <option disabled selected value>--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <select>
    <option disabled selected value>--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

Answer 2

I see I've already been beat to it... But as I already invested quite an amount of time, here's a solution that really removes all options that are already selected (reduced to three selects to make it simpler, just need to adapt the options object):

$(document).ready(function() {
var $allSelects = $('select.choice');

	$allSelects.change(function() {
  	var $this = $(this),
    	$otherSelects = $allSelects.not($this);
    
  	$otherSelects.each(function() {
    	var $this = $(this), currentVal = $this.val(), 
  		    options = {A: 0, B: 0, C: 0},
          newOptionsMarkup = '<option value=""></option>';
      
        for (o in options) {
       		if (o == currentVal || !$('option[value="' + o + '"]:selected', $allSelects.not($this)).length) {
          	newOptionsMarkup+= '<option value="' + o + '">' + o + '</option>';
          }      		
        }
    	$this.empty().html(newOptionsMarkup).find('option[value="' + currentVal + '"]').attr('selected', true);
  	});
   });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

As per enigmas comment on BenG's solution, here's a way if you want to keep all options in all selects and just want to reset the other select list where it has already been selected:

$(document).ready(function() {
var $allSelects = $('select.choice');

	$allSelects.change(function() {
  	var $this = $(this),
        $otherSelects = $allSelects.not($this);
    
      $('option[value="' + $this.val() + '"]:selected', $otherSelects).parent().val('');
   });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select class="choice">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

Answer 3

Here is an example using disabled instead of removing the option. this works for unselecting or changing an option also.

$('select').change(function() {
  // find the other selects
  var otherSelects = $('select').not(this);
  // get the old value of this select
  var oldValue = $(this).data('old');
  //remove disabled from the other selects option for the old value
  if (oldValue)
    otherSelects.find('option[value=' + oldValue + ']').removeAttr('disabled');
  //add disabled for the other selects option for the new value
  if (this.value)
    otherSelects.find('option[value=' + this.value + ']').attr('disabled', 'disabled');
  // store the new value as old  
  $(this).data('old', this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
  <option></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<select>
  <option></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<select>
  <option></option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>