JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<div class="form-group">
<label class="control-label col-sm-2" for="i_have">I have :</label>
<div class="col-sm-10">
<select id="old" class="form-control" placeholder="Select I have" name="i_have" onchange="dosomething()">

<option value = "select_option">Select Option</option>
<option value = "three_compact" data-id="3">3 Compact</option>
<option value = "three_regular" data-id="3">3 Regular</option>
<option value = "three_triple" data-id="3">3 Triple</option>
<option value = "five_compact" data-id="5">5 Compact</option>
<option value = "five_regular" data-id="5">5 Regular</option>
<option value = "five_triple" data-id="5">5 Triple</option>
<option value = "seven_compact" data-id="7">7 Compact</option>
<option value = "seven_regular" data-id="7">7 Regular</option>
<option value = "seven_triple" data-id="7">7 Triple</option>
<option value = "nine_compact" data-id="9">9 Compact</option>
<option value = "nine_regular" data-id="9">9 Regular</option>
<option value = "nine_triple" data-id="9">9 Triple</option>
</select>
</div>
</div>




<div class="form-group">
<label class="control-label col-sm-2" for="i_want">I want :</label>
<div class="col-sm-10">
<select id="new" class="form-control" placeholder="Select I want" name="i_want">

<option value = "select_option">Select Option</option>
<option value = "three_compact" data-id="3">3 Compact</option>
<option value = "three_regular" data-id="3">3 Regular</option>
<option value = "three_triple" data-id="3">3 Triple</option>
<option value = "five_compact" data-id="5">5 Compact</option>
<option value = "five_regular" data-id="5">5 Regular</option>
<option value = "five_triple" data-id="5">5 Triple</option>
<option value = "seven_compact" data-id="7">7 Compact</option>
<option value = "seven_regular" data-id="7">7 Regular</option>
<option value = "seven_triple" data-id="7">7 Triple</option>
<option value = "nine_compact" data-id="9">9 Compact</option>
<option value = "nine_regular" data-id="9">9 Regular</option>
<option...

JavaScript

function dosomething(){
  var selected = $("#old").find('option:selected');
  var extra = selected.data('id'); 
  
  $('#new option').prop('disabled', false);
  
  $("#new > option").each(function() {
    var data=$(this).data('id');
    if(parseInt(data)<=parseInt(extra)){
    	console.log(data);
    	$(this).prop('hidden',true);
       }
      else{
      $(this).prop('hidden',false);
      }
      
   
	});
}