jQuery动态选项在选择框中隐藏/显示

Question

我使用SELECT遵循简单的HTML代码，并且具有相同的类形式和相同的选项值

<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

<select class="gr-fields-select">
<option value="">Select</option>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>

我只想单击一个下拉动态显示，并从一个类的ALL SELECT中隐藏值。

jQuery.each($("select.gr-fields-select"), function(){            
$(".gr-fields-select").change(function() {
if($(".gr-fields-select").val() != "") {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
$(".gr-fields-select option[value="+$(".gr-fields-select").val()+"]").hide();
} else {
$(".gr-fields-select option[value!="+$(".gr-fields-select").val()+"]").show();
}
});
})

请在此处检查jdfiddle：https://jsfiddle.net/mhassan94/d6j3fpt2/3/

如何更好地实现？

Answer 1

尝试一下，