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

Question

我正在尝试创建一个包含多个选择的表单，用户应该从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>

这是我到目前为止我的脚本

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