JSFiddle - React, Tailwind, and code Playground

by bigwelly

HTML

<select id="box1">
  <option value='a' selected>a</option>
  <option value='b'>b</option>
  <option value='c'>c</option>
</select>


<select id="box2">
  <option value='a'>a</option>
  <option value='b'>b</option>
  <option value='c' selected>c</option>
</select>

JavaScript

function checkTheDropdowns(){
  var arr  = $('select').find(':selected');
  $('select').find('option').show();
	$.each($('select'), function(){  
	var self = this;
	var selectVal = $(this).val();
	$.each(arr, function(){  		
			if (selectVal !== $(this).val()){
					$(self).find('option[value="'+$(this).val()+'"]').hide()
      } else {
					$(self).find('option[value="'+$(this).val()+'"]').show()
      }
  });
})
};
checkTheDropdowns();
$('select').on('change', checkTheDropdowns);