JSFiddle - React, Tailwind, and code Playground
HTML
<label for="MaxExperienceDropDown">Min Experience</label>
<select name="MinExperience" id="MinExperienceDropDown">
<option value=""></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br>
<br>
<label for="MaxExperienceDropDown">Max Experience</label>
<select name="MaxExperience" id="MaxExperienceDropDown">
<option value=""></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="message"></div>
CSS
label{
display:block;
}
select{
width: 32%;
}
#message{
color:red;
}
JavaScript
//Cache these as variables so we only have to select once
var $min= $("#MinExperienceDropDown");
var $max = $("#MaxExperienceDropDown");
var $msg = $("#message");
//Apply a single change event to fire on either dropdown
$min.add($max).change(function () {
//Have some default text to display, an empty string
var text = "";
//Cache the vales as variables so we don't have to keep getting them
//We will parse the numbers out of the string values
var minVal = parseInt($min.val(),10);
var maxVal = parseInt($max.val(),10)
//Determine if both are numbers, if so then they both have values
var bothHaveValues = !isNaN(minVal) && !isNaN(maxVal);
if(bothHaveValues){
if(minVal > maxVal){
text += 'Minimum expreience should be less than maximum';
}else if(maxVal < minVal){
text += 'Maximum expreience should be greater than minimum';
}
}
//Display the text
$msg.html(text);
});