javascript - 如何根据 JQuery 中的其他选择选项动态更改选择选项？

Question

请看图片的HTML选择

此处的想法:如果用户在第一个 HTML 选择列表中选择“A”，则“A”不应出现在其他 HTML 选择列表中。这应该在所有列表中动态更新，即使用户开始在中间的选择列表之一中进行选择。下面的代码是部分不完美的不完整解决方案。我认为这是重复的。我想要做的是继续从 HTML Select 列表中推导出选项，直到用户到达最后一个 Select 时，只剩下一个选项。
选择的 ID 为“1”、“2”等...
我有以下 JQuery 代码:

    <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>

任何简单的想法将不胜感激。在此先感谢您的帮助。

Answer 1

这是一个使用 disabled 而不是删除选项的示例。这也适用于取消选择或更改选项。

$('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>