Tablesorter load corresponding data via filter

Question

I am using dropdown-filters in two of my colums and I would love it, if one made a choice in either of the columns, to only show the corresponding elements in the other column or if the not corresponding elements were grey instead of black.

For instance, if one chooses Arkansas, I would like only the cities in Arkansas to be shown.

Column 1:

<select class="tablesorter-filter" data-column="0" aria-label="Filter column by State..." data-lastsearchtime="1697033767405">
   <option value="">State</option>
   <option parsed="Alabama" data-function-name="Alabama" value= Alabama">Alabama</option>
   <option parsed="Alaska" data-function-name="Alaska" value="Alaska">Alaska</option>
   <option parsed="Arizona" data-function-name="Arizona" value="Arizona">Arizona</option>
   <option parsed="Arkansas" data-function-name="Arkansas" 
   value="Arkansas">Arkansas</option>
<option parsed="Alaska" data-function-name="Alaska" value="Alaska">Alaska</option>
</select>

Column 2:

<select class="tablesorter-filter" data-column="0" aria-label="Filter column by City..." data-lastsearchtime="1697033767405">
   <option value="">State</option>
   <option parsed="Huntsville" data-function-name="Huntsville" value= Huntsville">Huntsville</option>
   <option parsed="Birmingham" data-function-name="Birmingham" value="Birmingham">Birmingham</option>
   <option parsed="Montgomery " data-function-name="Montgomery " value="Montgomery ">Montgomery </option>
   <option parsed="Big Lake" data-function-name="Big Lake" value="Big Lake">Big Lake</option>
   <option parsed="Dillingham" data-function-name="Dillingham" value="Dillingham">Dillingham</option>
   <option parsed="Phoenix" data-function-name="Phoenix" value="Phoenix">Phoenix</option>
   <option parsed="Tucson" data-function-name="Tucson" value="Tucson">Tucson</option>
   <option parsed="Yuma" data-function-name="Yuma" value="Yuma">Yuma</option>
   <option parsed="Fayetteville" data-function-name="Fayetteville" value="Fayetteville">Fayetteville</option>
</select>

Filter Widget Options used

$table.tablesorter({
    theme: 'blue',
    widthFixed: true,
    ortList: [[0,0],[1,0]],
    widgets: ["zebra", "print", "columnSelector", "filter"],
    ignoreCase: true,

    widgetOptions : {
        filter_reset : '.reset',
        filter_ignoreCase  : true,
        filter_searchDelay : 200,
        filter_startsWith  : false,
        filter_matchType : { 'input': 'exact', 'select': 'exact' },
        filter_reset: '.reset',

        filter_external : '.search',
        filter_defaultFilter: { 1 : '~{query}' },
        filter_columnFilters: true,
        filter_placeholder: { search : 'Search...' },
        filter_saveFilters : true,

        columnSelector_container : $('#columnSelector'),
        columnSelector_name : 'data-name',

        print_title      : 'Table', 
        print_dataAttrib : 'data-name',
        print_rows       : 'f',
        print_columns    : 's',
        print_extraCSS   : '',
        print_styleSheet : '/assets/css/print.css',
        print_now        : true, 
        print_callback   : function(config, $table, printStyle) {
            $.tablesorter.printTable.printOutput( config, $table.html(), printStyle );
        }
    }
});