XF 2.1 How do I display dropdown results based on previous dropdown

[Cupara]

I have 6 dropdowns and each one is based on the previous.

So for instance, the first is the sport, the second is league and will only display leagues based on the sport chosen, then the third is the even where only events for the league chosen will display, and so on until we reach the final one which is the amount of stake your putting on the event.

I can populate them but I need to filter them based on previous choice. Any ideas on how to accomplish that?

Here is my current action for create tip:

    public function actionCreate()
    {
        $options = \XF::options();
        $db = \XF::db();
        $visitor = \XF::visitor();
        $app = \XF::app();
        $tipsFinder = \XF::finder('BetClever\Tipsters:Tips');
        $sportFinder = \XF::finder('BetClever\Tipsters:Sports');
        $stakesFinder = \XF::finder('BetClever\Tipsters:Stakes');
        
        $viewParams = [
            'tips' => $tipsFinder->with('Sports', 'Leagues', 'Bets', 'User', 'Events')->fetch(),
            'sports' => $sportFinder->fetch(),
            'stakes' => $stakesFinder->fetch()
        ];
        
        return $this->view('BetClever\Tipsters:Create', 'bc_tips_create', $viewParams);
    }

Here is my current template for the create tip page:

<xf:title>{{ phrase('bc_tips_create') }}</xf:title>


{{ phrase('bc_read_rules_first') }}
<xf:button href="{{ link('tips/rules') }}" class="button--cta" overlay="true">
    {{ phrase('bc_read_rules') }}
</xf:button>
<br /><br />
<xf:form action="{{ link('bc-bookmakers/save', $bookmakers) }}" ajax="true" class="block">
    <div class="block-container">
        <div class="block-body">
            <xf:selectrow name="sport" value="{$sports.sport_id}" label="{{ phrase('bc_tips_select_sport') }}">
                <xf:option value="-">
                    {{ phrase('bc_tips_select_sport') }}
                </xf:option>
                <xf:foreach loop="{$sports}" value="{$sport}">
                    <xf:option name="{$sport.name}" value="{$sport.sport_id}"><img src="/styles/Tipsters/sports/{$sport.icon}" width="25px" /> {$sport.name}</xf:option>
                </xf:foreach>
            </xf:selectrow>
            <xf:selectrow name="league" value="" label="{{ phrase('bc_tips_select_league') }}">
                <xf:option value="-">
                    {{ phrase('bc_tips_placeholder') }}
                </xf:option>
            </xf:selectrow>
            <xf:selectrow name="event" value="" label="{{ phrase('bc_tips_select_event') }}">
                <xf:option value="-">
                    {{ phrase('bc_tips_placeholder') }}
                </xf:option>
            </xf:selectrow>
            <xf:selectrow name="category" value="" label="{{ phrase('bc_tips_category_bet') }}">
                <xf:option value="-">
                    {{ phrase('bc_tips_placeholder') }}
                </xf:option>
            </xf:selectrow>
            <xf:selectrow name="type" value="" label="{{ phrase('bc_tips_type_bet') }}">
                <xf:option value="-">
                    {{ phrase('bc_tips_placeholder') }}
                </xf:option>
            </xf:selectrow>
            <xf:selectrow name="stake" value="" label="{{ phrase('bc_tips_stake') }}">
                <xf:option value="-">
                    {{ phrase('bc_tips_stake') }}
                </xf:option>
                <xf:foreach loop="{$stakes}" value="{$stake}">
                    <xf:option value="{$stake.name}">{$stake.name}</xf:option>
                </xf:foreach>
            </xf:selectrow>
            <xf:editorrow name="description" value="" rowtype="fullWidth" previewable="0" placeholder="{{ phrase('bc_tips_description') }}" label="{{ phrase('bc_tips_description') }}" />
        </div>
        <xf:submitrow icon="save" sticky="true" />
    </div>
</xf:form>

 

[Cupara]

I have figured I'll need to use jQuery, Ajax, or utilize JSON data model to accomplish this.