I want to hide option from previous selected dropdown but my solution only works for two dropdown list.

This means that when I come to third dropdown list it will not display selected option from second dropdown list which is ok but it will display selected option from first one.

So, as I understand, methods I'm using overrides the last one that's why it not works.

Here is my select lists:

<select id="select1" 
        onchange="getSelectValue(this.value)" 
        asp-for="AssignedGroups.GroupMemberId1" 
        asp-items="@(new SelectList(Model.Agents,"Agent_Id","Agent_Id"))" 
        >
    <option hidden selected></option>
</select>

<select id="select2" 
        onchange="getSelectValue2(this.value)" asp-
        for="AssignedGroups.GroupMemberId2"  
        asp-items="@(new SelectList(Model.Agents,"Agent_Id","Agent_Id"))"  
         >
    <option hidden selected></option>
</select>

<select id="select3" 
        onchange="getSelectValue3(this.value)" asp-
        for="AssignedGroups.GroupMemberId3" 
        asp-items="@(new SelectList(Model.Agents, "Agent_Id", "Agent_Id"))" 
        >
    <option hidden selected></option>
</select>

And my script: strong text

function getSelectValue(select1) {
            $("#select2 option[value='"   select1   "']").hide();
            $("#select2 option[value!='"   select1   "']").show();
            $("#select3 option[value='"   select1   "']").hide();
            $("#select3 option[value!='"   select1   "']").show();

    }

    function getSelectValue2(select2) {
        
            $("#select1 option[value='"   select2   "']").hide();
            $("#select1 option[value!='"   select2   "']").show();
            $("#select3 option[value='"   select2   "']").hide();
            $("#select3 option[value!='"   select2   "']").show();

    }

    function getSelectValue3(select3) {
        $("#select1 option[value='"   select3   "']").hide();
        $("#select1 option[value!='"   select3   "']").show();
        $("#select2 option[value='"   select3   "']").hide();
        $("#select2 option[value!='"   select3   "']").show();

        
    }

CodePudding user response：

I created a single function that handles unhiding and hiding of all options, then filters the other dropdowns' options based on all selected values. Here's the function/demo:

function hideOthers() {
  // Get all selected values
  let selectedValues = $(".form-control option:selected").map(function() {
    if (this.value.length === 0) {
      return null;
    }
    return this.value;
  });
  // Unhide all so we can hide the correct ones
  $("select.form-control option").removeAttr('hidden');

  // Filter out the selected values from dropdowns
  $(".form-control").each(function() {
    var selectElem = $(this);
    $.each(selectedValues, function(index, value) {
      // If the selected value from the array is from the applicable <select>, skip hiding
      if (selectElem.find("option:selected").val() !== value) {
        selectElem.find(`option[value="${value}"]`).attr('hidden', true);
      }
    });
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1" onchange="hideOthers()" >
  <option hidden selected></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>
</select>

<select id="select2" onchange="hideOthers()" >
  <option hidden selected></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>
</select>

<select id="select3" onchange="hideOthers()" >
  <option hidden selected></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>
</select>