JSFiddle - React, Tailwind, and code Playground
HTML
<select id="from1" relatedTo="to1">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<select id="to1" relatedTo="from1">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<br/>
<select id="from2" relatedTo="to2">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
<select id="to2" relatedTo="from2">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
JavaScript
// function to validate two selects
function validateSelects( fromSelector, toSelector ) {
// registering the change event to the "to" select
$( toSelector ).change(function() {
var fromSelector = "#" + $(this).attr( "relatedTo" );
var toSelector = "#" + $(this).attr( "id" );
// compares the value of the selected item with the from select
if ( $(this).val() > $( fromSelector ).val() ) {
// selects the value of the from select
$(this).val( $( fromSelector ).val() );
}
});
// puts the gui in a valid state
$( fromSelector ).change(function() {
var fromSelector = "#" + $(this).attr( "id" );
var toSelector = "#" + $(this).attr( "relatedTo" );
// compares if the value of this field is less than the value of the "to" select
if ( $(this).val() < $( toSelector ).val() ) {
// if so, change the value of the "to" select
$( toSelector ).val( $(this).val() );
}
});
}
validateSelects( "#from1", "#to1" );
validateSelects( "#from2", "#to2" );