html - 如果在另一个选择中选择了此选项，如何禁用选择中的选项

Question

我有三个具有相同选项的选择组。如果在另一个选择中选择了此选项，如何禁用选择中的选项？

                        <select class="form-control" id="first_select" name="foo" required>
                            <option disabled selected value="0">Choose*</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                        <select class="form-control" id="second_select" name="foo2" required>
                            <option disabled selected value="0">Choose*</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4>4</option>
                            <option value="5">5</option>
                        </select>
<select class="form-control" id="third_select" name="foo3" required>
                                <option disabled selected value="0">Choose*</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4>4</option>
                                <option value="5">5</option>
                            </select>

Answer 1

你可以这样做:

$(".form-control").on("change", function() {
   let selects = $(".form-control").not(this);
   let allSelects = $(".form-control");
   selects.each(function() {
      let options = $(this).find("option");
      options.each(function() {
         $(this).prop("disabled", false);
      });
   });

   allSelects.each(function() {
      let val = $(this).val();
      $(".form-control").not(this).find("option[value='" + val + "']").prop("disabled", true);

   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="first_select" name="foo" required>
  <option disabled selected value="0">Choose*</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<select class="form-control" id="second_select" name="foo2" required>
  <option disabled selected value="0">Wybierz zawód*</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<select class="form-control" id="third_select" name="foo3" required>
    <option disabled selected value="0">Choose*</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>