JQuery

Question

我想隐藏之前 selected 下拉列表中的选项，但我的解决方案仅适用于两个下拉列表。

这意味着当我进入第三个下拉列表时，它不会显示第二个下拉列表中的 selected 选项，这没问题，但它会显示第一个下拉列表中的 selected 选项。

因此，据我所知，我使用的方法覆盖了最后一个方法，这就是它不起作用的原因。

这是我的 select 列表：

<select id="select1" 
        onchange="getSelectValue(this.value)" 
        asp-for="AssignedGroups.GroupMemberId1" 
        asp-items="@(new SelectList(Model.Agents,"Agent_Id","Agent_Id"))" 
        class="form-control">
    <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"))"  
        class="form-control" >
    <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"))" 
        class="form-control">
    <option hidden selected></option>
</select>

还有我的脚本： 强文本

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

        
    }

Answer 1

我创建了一个函数来处理所有选项的取消隐藏和隐藏，然后根据所有选定值过滤其他下拉菜单的选项。这是 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()" class="form-control">
  <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()" class="form-control">
  <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()" class="form-control">
  <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>

JQuery - Hide/show 来自先前选择的下拉列表的选项

JQuery - Hide/show option from previous selected dropdown

selectlist