get post based on category chosen in drop down – The ajax method

You can get your code to work by tweaking it a little bit. First, you need to create a form that includes the categories. Then, submit the form the the same page to apply it to the query.

<div class="latest_video">

    <!-- We add a form that submits the request the the same page -->
    <form method="get">
        <?php wp_dropdown_categories( 'show_count=1&hierarchical=1' ); ?>
        <input type="submit" name="submit" value="view" />
    </form>

    <?php
    // the query
        $the_query = new WP_Query( array(
        'post_type' => 'post',
        'posts_per_page' => 10,
        'post_status' => 'publish',
        'category_name' => $_GET['cat']
        )  );
    ?>
    <?php if ( $the_query->have_posts() ) : ?>
        <!-- the loop -->
        <ul class="flex">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
            <li class="thebox">
                <div class="theimg"><?php the_post_thumbnail( 'large') ?></div>
                <div class="stext3">
                    <h4><?php $categories = get_the_category();
                    if ( ! empty( $categories ) ) {
                      echo '<a class="themecolor" href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">'  . esc_html( $categories[0]->name ) . '</a>';
                    } ?></h4>
                    <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                </div>
            </li>
        <?php endwhile; ?>
        </ul>
        <!-- end of the loop -->
        <!-- <?php wp_reset_postdata(); ?> -->
    <?php endif; ?>
</div>

Now, the initial load will include all the categories in the WP_Query, but once the user chooses a category and submits the form, the page will reload and the WP_Query will be updated. Make sure you don’t add action to your form, so it will be submitted to the current page.

If you want to reload the page without clicking the submit button, you can add this JS snippet and remove the button:

var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = window.location.href + "?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;

For further information, please refer to the wp_dropdown_categories() codex page.