从下一个下拉菜单中删除已选择的下拉值

Question

我有7个下拉菜单，用于获得人员优先级。当用户选择一个值时，我希望将其从下一个剩余的菜单中删除。
但是jQuery代码仅适用于2个菜单。（我从：删除从另一个下拉菜单中选择的下拉值的代码）

   <select class="form-control SelectPriority" autocomplete="off" id="FirstPriority">
        <option value="0" disabled selected value>Please choose one.</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>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
    <select class="form-control SelectPriority" autocomplete="off" id="SecondPriority">
        <option value="0" disabled selected value>Please choose one.</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>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
    <select class="form-control SelectPriority" autocomplete="off" id="ThirdPriority">
        <option value="0" disabled selected value>Please choose one.</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>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
    <select class="form-control SelectPriority" autocomplete="off" id="ForthPriority">
        <option value="0" disabled selected value>Please choose one.</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>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
    <select class="form-control SelectPriority" autocomplete="off" id="FifthPriority">
        <option value="0" disabled selected value>Please choose one.</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>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
    <select class="form-control SelectPriority" autocomplete="off" id="SixthPriority">
        <option value="0" disabled selected value>Please choose one.</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>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
    <select class="form-control SelectPriority" autocomplete="off" id="SeventhPriority">
        <option value="0" disabled selected value>Please choose one.</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>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>

和jQuery代码：

    $(document).ready(function () {

$(".SelectPriority").change(function () {
    // Get the selected value
    var selected = $("option:selected", $(this)).val();
    // Get the ID of this element
    var thisID = $(this).prop("id");
    // Reset so all values are showing:
    $(".SelectPriority option").each(function () {
        $(this).prop("disabled", false);
    });
    $(".SelectPriority").each(function () {
        if ($(this).prop("id") != thisID) {
            $("option[value='" + selected + "']", $(this)).prop("disabled", true);
        }
    });
});
});

Answer 1

您可以做这样的事情

$(document).ready(function() {
  $('.SelectPriority').change(function () {
    // Reset, enable all
    $('.SelectPriority option[value!=0]').prop('disabled', false);
    // Foeach list
    $('.SelectPriority').each(function() {
      // Disable the selected value in other lists
      $(this).siblings().find('[value=' + $(this).val() + ']').prop('disabled', true);
    });
  });
});

Answer 2

检查此代码

 $(document).ready(function() {
  $('.SelectPriority').change(function () {
        $('.SelectPriority').each(function() {
      $(this).siblings().find('[value=' + $(this).val() + ']').prop('disabled', true);
    });
  });
});

https://jsfiddle.net/z4muxl9n/2/