jquery隐藏选择前一个值，onchange显示新值下拉菜单

Question

我在jquery上遇到问题。我想隐藏选择值（以前的值），但是如果更改下拉列表，它将显示新值，并从所有下拉列表中隐藏以前的值。

HTML下拉列表

<select class="gr-fields-select">
<option value="">Select</option>
<option value="18355">Product Management</option>
<option value="18356">QA</option>
<option value="18357">Sales</option>
<option value="98595">Support</option>
<option value="05223">Test group</option>
<option value="05224">Test group one user</option>
</select>
</div>

这是我的jquery函数

function hideSelectedValues(){
$("select").each(function(){
    let selectValue = $(this).val();
    if(selectValue == "Select" || selectValue == "") return;
    $(this).addClass("currentSelection");

    $("select").each(function(){
        if(!$(this).hasClass("currentSelection")){              
            let previousValue = $(this).val();                  
            $(this).find(`option[value='${previousValue}']`).hide();
        }
        else{
            $(this).on('change',function () {      //change and show newValue     
                let newValue = $(this).val();
                $(this).find(`option[value='${newValue}']`).show();
                $(this).find(`option[value='${previousValue}']`).hide();  //Error undefined
            });
        }

    });
    $(this).removeClass("currentSelection");
})
}

此功能不起作用。我无法从IF条件获取先前的值并在ELSE主体中传递先前的值以隐藏先前的值，但是它给出了错误的先前值未定义

我在此功能中犯了什么错误？

有人可以帮助我吗？

Answer 1

onchange="if($(this).val()=='1') $('#18355').show();else $('#18355').hide();