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

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/