javascript - 使用 jquery 分离/附加选择选项

Question

我正在尝试设置一个具有多个下拉列表的表单，这将允许访问者对列表项进行排名。表格示例:

<form action="" name="rankem">
  <select name="rank1" id="rank1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
  <select name="rank2" id="rank2">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
  <select name="rank3" id="rank3">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
</form>

选择选项后，我想从每个下拉列表中删除(分离)它们。

我的实际列表包含更多选项，以便人们可以在 32 个选项中排名前 10 个，因此想象一下上面的示例代码有 10 个下拉列表，每个下拉列表有 32 个选项。

如果有人从 select#rank1 中选择“option2”，我希望从后续下拉列表中删除 option2，依此类推。如果他们返回 select#rank1，并将选择更改为“option4”，则需要将“option2”附加到所有下拉列表中。

我查看了 .detach() 和 .append() 但并不真正知道我在做什么。

$("option[value="+$(this).val()+"]").detach();

我尝试了上述方法来启动，但它只是从所有下拉列表中删除了该选项。我是一个 JS/jquery 菜鸟，所以任何帮助或正确方向的链接都值得赞赏。谢谢!

Answer 1

尝试使用此行(用于分离元素):

$("select:not(#"+$(this).parent().attr('id')+") option[value="+$(this).val()+"]").detach();