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>

Answer 2

So in the don't re-invent the wheel category. I'm thinking a multi select such as select2 might accomplish what you want alot easier than the multiple drop downs. select 2 even lets you limit your selection length if you only want two. I think with multiple drop downs there is alot to track. especially if you want more than two drop downs. What if they choose the selects out of order? run the snippet below to see a possible implementation using a multiselect

$(document).ready(
    function () {
        $("#multipleSelectExample").select2({
          maximumSelectionLength: 2,
          closeOnSelect: false,
          allowClear: true
        });
    }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css">

<select id="multipleSelectExample" data-placeholder="Select" multiple>
<option value="1042000018355">Product Management</option>
<option value="1042000018356">QA</option>
<option value="1042000018357">Sales</option>
</select>