JSFiddle - React, Tailwind, and code Playground

by RamanChodzka

HTML

<select name="from" id="abs-from-1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

<select name="to" id="abs-to-1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

JavaScript

jQuery(function ($) {
    var from = $('#abs-from-1');
    var to = $('#abs-to-1');
    
    from.change(function () {
        var selectedIndex = this.selectedIndex;
        to.find('option').prop('disabled', false).filter(function (index) {
            return index < selectedIndex;
        }).prop('disabled', true);
    });
    
    to.change(function () {
        var selectedIndex = this.selectedIndex;
        from.find('option').prop('disabled', false).filter(function (index) {
            return index > selectedIndex;
        }).prop('disabled', true);
    });
});