Javascript 多个选择：在一个选择中禁用/隐藏/删除所选选项

我正在尝试创建一个包含多个select的表单，用户应该将这些select从1到8排列。但是，我在隐藏/删除/禁用select选项时遇到了一些问题

这是我的表格 这只是排名的8个选择中的前四个

  <label>Spirituality</label>\
 <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>
   <label>School</label>
  <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>
   <label>Family</label>
  <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>
   <label>Friends</label>
  <select id="ranks1" class="form-control form-input" name="answer[]" required>
    <option value="" selected>--</option>
    <?php for ($i=1;$i<=10;$i++){?>
    <option value="<?=$i;?>"><?= $i;?></option>
    <?php } ?>
  </select>

我这样做是为了CSS。对于禁用选项

select option[disabled] {
    display: none !important;
}

有关表单外观的更多背景信息。

---

我认为您想要的是

更改
事件，而不是
单击
事件

请考虑下面的示例，该示例禁用更改的选定选项。
HTML:

JSFIDLE:
一组选择并不能为排名顺序提供良好的UI。而是考虑何时禁用SELECT选项？换句话说，您遇到了什么问题？您知道
id
是唯一的标识符，您的DOM中不应该有具有相同
id
的元素。对吧@用户1477388。在选择选项中选择的号码未隐藏/disabling@EhsanT哦。我只是觉得他们在同一个表单组，应该有相同的ID。对不起，但是我有多个选择。相同的原则适用于所有选择。例如，请参见[！[我的目标是在下一个选择中禁用所选选项，而不是在同一个选择中][1][1][1]：要在下一个选择列表中禁用所选选项，只需使用jquery的
.next（）
函数即可
select option[disabled] {
    display: none !important;
}

<select id="selectlist">
  <option value="0">Please select</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

$('#selectlist').on('change', function() {
    var selectedVal = $(this).find(":selected").val();
  if (selectedVal != 0) {
    // disable selected value
    var selectedOption = $(this).find('option[value=' + selectedVal + ']');
    selectedOption.attr('disabled', 'disabled');
  }
});