How to build a AJAX-Function for HTML Select-Tag (dropdown-Menu)

I have a price/product-Comparison-Site.
My Site shows me all my Products, above I have a Select-Dropdown-Menu, where I can order the products by price, name, etc.
The Problem here is, if I switch the Orderby-Option, the site refresh. I want to change the options without a refresh of the site, so it can solve with AJAX.
The Problem here is I am very new in AJAX, JS, jQuery, WordPress, PHP so and I don’t know how to build, and add the codes in my wordpress site 🙂
I hope someone can help me here out – thank you guys in advanced.
Here my codes:

So this is how I get the Select-Orderby-Filter to my site:

    // filter layout
                    if(isset($_GET['layout'])) {
                        $layout = $_GET['layout'];
                    }

                    if (have_posts()) :
                        if('1' == $userfilter)
                            get_template_part('parts/product/code', 'filter');

So thats the Filter-Function-Code.php

    <?php
/*
 * VARS
 */
global $layout, $args, $orderby, $order, $default_orderby;

$orderby = $default_orderby;

if ( isset( $_GET['orderby'] ) ) {
    $orderby = $_GET['orderby'];
} else {
    switch ( $orderby ) {
        case 'price' :
            if ( $order == 'asc' ) {
                $orderby = 'price-asc';
            } else {
                $orderby = 'price-desc';
            }
            break;

        case 'name' :
            if ( $order == 'asc' ) {
                $orderby = 'a-z';
            } else {
                $orderby = 'z-a';
            }
            break;
    }
}

if ( isset( $_GET['order'] ) ) {
    $order = $_GET['order'];
}
?>
<div class="result-filter">
    <div class="row">
        <div class="col-sm-6 hidden-xs">
            <ul class="list-inline">
                <li><span class="result-title"><?php _e( 'Ansicht:', 'affiliatetheme' ); ?></li>
                <li>
                    <a class="btn btn-link <?php echo( $layout == 'grid' ? 'active' : '' ); ?>" title="<?php _e( 'Gridansicht', 'affiliatetheme' ); ?>" data-value="grid" href="<?php echo requestUriAddGetParams( array( 'layout' => 'grid' ) ); ?>">
                        <i class="fas fa-th"></i>
                    </a>
                </li>
                <li>
                    <a class="btn btn-link <?php echo( $layout == 'list' ? 'active' : '' ); ?>" title="<?php _e( 'Listenansicht', 'affiliatetheme' ); ?>" data-value="list" href="<?php echo requestUriAddGetParams( array( 'layout' => 'list' ) ); ?>">
                        <i class="fas fa-bars"></i>
                    </a>
                </li>
            </ul>

        </div>
        <div class="col-xs-12 col-sm-6 orderby">
            <select name="orderby" id="orderby" onchange="" class="form-control">
                <option value="date" <?php selected( 'date', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Neuheiten', 'affiliatetheme' ); ?></option>
                <option value="rating" <?php selected( 'rating', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Beliebtheit', 'affiliatetheme' ); ?></option>
                <option value="price-asc" <?php selected( 'price-asc', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Preis (aufsteigend)', 'affiliatetheme' ); ?></option>
                <option value="price-desc" <?php selected( 'price-desc', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Preis (absteigend)', 'affiliatetheme' ); ?></option>
                <option value="a-z" <?php selected( 'a-z', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Name (aufsteigend)', 'affiliatetheme' ); ?></option>
                <option value="z-a" <?php selected( 'z-a', ( $orderby ? $orderby : '' ), true ); ?>><?php _e( 'Name (absteigend)', 'affiliatetheme' ); ?></option>
            </select>
        </div>
    </div>
</div>

<hr>

Also here the HTML Code of the Dropdown-Menu:

    <div class="col-xs-12 col-sm-6 orderby">
            <select name="orderby" id="orderby" onchange="" class="form-control">
                <option value="date" selected="selected">Neuheiten</option>
                <option value="rating">Beliebtheit</option>
                <option value="price-asc">Preis (aufsteigend)</option>
                <option value="price-desc">Preis (absteigend)</option>
                <option value="a-z">Name (aufsteigend)</option>
                <option value="z-a">Name (absteigend)</option>
            </select>
        </div>

If something is missing please tell me, I will post it here.