Select dropdown menu without submit button-CodePudding

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.

    <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 >
      <select name="filter-posts" id="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
  }

CodePudding user response：

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" >
        <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>

CodePudding user response：

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>