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 selectedValue = parseInt($(this).val());
        to.find('option').prop('disabled', false).filter(function () {
            return parseInt(this.value) < selectedValue;
        }).prop('disabled', true);
    });
    
    to.change(function () {
        var selectedValue = parseInt($(this).val());
        from.find('option').prop('disabled', false).filter(function () {
            return parseInt(this.value) > selectedValue;
        }).prop('disabled', true);
    });
});