JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <select id="category" size="2">
        <option class="cat-1">Group 1</option>
        <option class="cat-2">Group 2</option>
    </select>

    <select id="condition" size="2">
        <option class="cat-1">Item from group 1</option>
        <option class="cat-1">Item from group 1</option>
        <option class="cat-1">Item from group 1</option>
        <option class="cat-2">Item from group 2</option>
        <option class="cat-2">Item from group 2</option>
        <option class="cat-2">Item from group 2</option>
    </select>

CSS

.hidden {
        display: none !important;
    }
    
    #category {
      height: 40px;
    }
    
    #condition {
      height: 110px;
    }

JavaScript

$(document).on('change', '#category', function (e) {
        if ($(this).prop('selectedIndex') == 0) {
            $('#condition option').addClass('hidden');
            $('#condition .cat-1').removeClass('hidden');
        }
        else if ($(this).prop('selectedIndex') == 1) {
            $('#condition option').addClass('hidden');
            $('#condition .cat-2').removeClass('hidden');
        }
    });