JSFiddle - React, Tailwind, and code Playground

by Renish A R

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
  <div class="form-element">
    <select id="sl1" class="jis">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>
  <div class="form-element">
    <select id="sl2" class="jis">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>
  <div class="form-element">
    <select id="sl3" class="jis">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>
  <div class="form-element">
    <select id="sl4" class="jis">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>
</div>

CSS

.jis {
  padding: 8px 5px;
  margin-bottom:5px;
}

JavaScript

jQuery(function($){

	$('.jis').change(function(e) {
  	var current = $(this).attr('id');
    var current_val = $(this).val();
    
    $('.jis').each(function(f) {
    	var fcurrent = $(this).attr('id');
    	if(current!=fcurrent)
      {
      	$(this).find("option[value*='"+current_val+"']").prop('disabled',true);
      }    
    });
    
  });

});