多项选择：一次选择禁用/隐藏/删除选定的选项

Question

我正在尝试创建一个包含多个选择的表单，用户应将这些选择从 1 到 8 进行排名。但是，我在隐藏/删除/禁用选择选项时遇到了一些麻烦。

这是我的表格 这只是要排名的 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>

这就是我目前的剧本

$(document).ready(function () {
    $("#ranks1").click(function () {
        $('#ranks1 option').prop('disabled', true);
    });
});

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

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

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

Answer 1

我认为您想要的是 change 事件，而不是 click 事件。

请考虑以下示例，该示例在更改时禁用所选选项。

HTML：

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

Javascript：

$('#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');
  }
});

JSFiddle：https://jsfiddle.net/tp9urjkb/