Select dropdown menu without submit button

Question

I'm creating a sorting feature using the select dropdown menu. There's no errors but it is not working. Is there any part where I'm doing it wrong? This works fine when I'm using this method for checkbox filters.

js

    <script type="text/javascript">
       $(function () {
         $('select').on('change', function () {
           $('#filter-posts-form').submit();
         });
       });
     </script>

php

    <form id="filter-posts-form" method="post" action="main.php">
     <div class="table-filter-group">
      <select name="filter-posts" id="filter-posts" class="filter-posts" >
       <option value=""<?=(isset($_POST['MostPopular'])? 'selected':'')?>>Most Popular</option>
       <option value=""<?=(isset($_POST['Latest'])? 'selected':'')?>>Latest</option>
      </select>
     </div>
    </form>

 if(isset($_POST['MostPopular'])){
    //function
  }elseif(isset($_POST['Latest'])){
    //function
  }

Answer 1

This Will Work Without Ajax Copy The The Form And Paste

 <form id="filter-posts-form" method="post" action=""> <select name="filter-posts" id="filter-posts" class="filter-posts"> <option value="1" <?= (isset($_POST['filter-posts']) && $_POST['filter-posts'] == 1 ? 'selected' : '') ?>>Most Popular</option> <option value="2" <?= (isset($_POST['filter-posts']) && $_POST['filter-posts'] == 2 ? 'selected' : '') ?>>Latest</option> </select> </div> </form>

Answer 2

I suspect that you just didn't load jQuery as the codes looks ok.

try add this at the beginning.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>