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

【问题标题】：Remove a dropdown value that has been selected, from next dropdown menus从下一个下拉菜单中删除已选择的下拉值
【发布时间】：2017-10-01 22:42:04
【问题描述】：

我有 7 个下拉选择菜单，用于接收人员优先级。当用户选择一个值时，我希望将其从下一个剩余菜单中删除。
但是 jQuery 代码只适用于 2 个菜单。（我的代码来自：Remove a dropdown value that has been selected from another dropdown menu）

   <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);
        }
    });

});
});

【问题讨论】：

也许不同的用户体验可以解决这个问题并且对你的用户来说更容易？将标签拖动到正确的顺序怎么样？快速谷歌搜索发现this jquery plugin 似乎有效。
是的，我完全同意。但这不是我的选择，客户想要这样。

标签： javascript jquery html

【解决方案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);

    });

  });

});

【讨论】：

【解决方案2】：

检查此代码

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

https://jsfiddle.net/z4muxL9n/2/

【讨论】：