Starstack Starstack - 3 years ago 161
HTML Question

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

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

});
});

Answer Source

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

    });

  });

});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download