Remove a dropdown value that has been selected, from next dropdown menus

Question

I have 7 drop down select menus, for receiving people priorities. When a user selects a value, I want it to be removed from the next remaining menus.
But the jQuery code just works for 2 menus. (I got the code from: 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>

and the jQuery code:

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

});
});

Perhaps a different UX would solve this problem _and_ be easier for your users? What about dragging labels into the correct order? A quick googling finds [this jquery plugin](http://www.jqueryscript.net/layout/Accessible-Touch-Friendly-Drag-Drop-Html-List-with-jQuery.html) that seems to work. — Paul Hicks, Oct 01 '17 at 22:44
Yes, I completely agree. But that's not my choice, the customer wants that. — Starstack, Oct 01 '17 at 22:46

faressoft · Accepted Answer · 2017-10-01T22:56:56.613

You can do something like this

$(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);

    });

  });

});

score 0 · Answer 2 · answered Oct 01 '17 at 23:10

Check this code

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

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

Remove a dropdown value that has been selected, from next dropdown menus

2 Answers2