Jquery dynamic options hide/show in select box

Question

I have following simple Html code with SELECT with the same class forms with identical options values

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

I just want to do click on a dropdown dynamic show and hide value from ALL SELECT with one class.

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

Please check the jdfiddle here: https://jsfiddle.net/mhassan94/d6j3fpt2/3/

If a select one dropdown value, they hide from All dropdown but if a change select dropdown value they show previous value and hide the new value in All dropdown.

How is that better to achieve?

Answer 1

Is this what you want to do?

$(".gr-fields-select").change(function(){
  var selectedValue = $(this).val();
  $(".gr-fields-select").each(function(ind, item){
     if($(item).find(':selected').value!=selectedValue){
     $(item).find('option').each(function(index,option){
        if(option.value!=selectedValue){
          $(option).show();
        }else{
          $(option).hide();
        }
      });
    }  
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>First</label><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>

<br>
<label>Second</label><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>

<br>

If you need to hide the value selected in one particular select element,from all the values populated in rest of the select elements try this,

$(".gr-fields-select").change(function(){
	
  var selectedValue = $(this).val();
  var previousValue = $(this).data("new");
  if(previousValue!=undefined){
  	$(this).data("old",previousValue);
  }
  $(this).data("new",selectedValue);
  $(".gr-fields-select").each(function(ind, item){
     if($(item).find(':selected').value!=selectedValue){
     $(item).find('option').each(function(index,option){
        if(option.value==selectedValue){
           $(option).hide();
        }
        if(option.value==previousValue){
         	 $(option).show();
        }
      });
    }  
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

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