JavaScript Code to trigger Dynamic Filter functions

I know this is a custom code question... but I'm hoping someone can help me with this.

I'm adding custom drop downs, which will be populated with values of a drop down field... when these drop downs are changed, I want them to operate such as the dynamic filters on the sidebar.

This will be on the Table Dashboard, not on a form.

I've created the drop boxes, but I'm having some issue deciphering the event handling of the Dynamic Filters to trigger them myself. My plan is to just rewrite the tableDashboardHeader and keep what is there by default, but add my drop downs next to the native search box.

Here is what I have so far as an example:

<header id="tableDashboardHeader">
        <table><tbody><tr><td>
        <div class="HeaderWithSearch">
                <!-- *******************  Instant Search   ******************************* -->
                
                <form id="facetKeywordForm" class="Large">
                    <input type="text" id="facetKeyword" maxlength="255" class="FacetKeyword UserInput" placeholder="Search">
                    <a href="#" class="DoSearch Icon"></a>
                </form>
                <div id="facetBin"></div>
            </div></td>
            <td>
                <label class="Title FS-Action" for="PayGroupSelect">Filter by Gender</label>
                <select id="PayGroupSelect" size="1" class="hybridStyle">
                            <option class="AspectOption FS-Tool-A">Male</option>
                            <option class="AspectOption FS-Tool-A">Female</option>        
                </select>
            </td>
            <td>
                <select size="1" class="hybridStyle">
                            <option>Second Drop Down populated here</option>
                </select>
            </td>
            </tr>
        </tbody></table>
        </header>