How to properly organize a filter for a site?

Question

AJAX

exist form fields can be many . If the user selects one field for example 'widther ' is it possible to make an ajax request? namely get all data where widther = x; the request will be sent and you need to somehow save the selected value to add it to the user's subsequent selections.
And if the user also selects the Radius field, then you need to send a query to the database where widther = x AND Radius = x how to do it correctly, i.e. if you save the previously selected values the user for performance of the next request?

<form class="form" action="index.php" method="post">
      
      <label for="">width</label>
      <select id="widther" class="widther" name="widther">
        <option value="">Выбрать</option>
        
        <?php foreach($widthers as $widthe):?>
            <option value="<?php echo $widthe; ?>"><?php echo $widthe; ?></option>
        <?php endforeach;?>    
      </select>
 
      <label for="">profil</label>
      <select id="profil" class="profil" name="profil">
        <option value="">Выбрать</option>
        <?php foreach($profils as $profi):?>
            <option value="<?php echo $profi; ?>"><?php echo $profi; ?></option>
        <?php endforeach;?>
      </select>
 
        <label for="">Radius</label>
      <select id="radius" class="r" name="r">
        <option value="">Выбрать</option>
        <?php foreach($radiuses as $radiu):?>
            <option value="<?php echo $radiu; ?>"><?php echo $radiu; ?></option>
        <?php endforeach;?>    
      </select>
 
     <form>

<script type="text/javascript">

$(document).ready(

        function () {
            $('#widther, #profil, #radius, #brand').change(function () {
    
      
             var parametr_widther = $("#widther :selected").val();
               
             $.ajax({
                 url: "ajaxik.php",
                 type: "POST",
                 dataType: "html",
                 data: {"widtherr" :parametr_widther},
                 success: function (responce) {
                  $('h2').text('данные отправлены');
                 },
                 error: function (responce) {
                   $('h2').text('Ошибка, данные не отправлены');
                 }
               });
             });

           });
</script>

// handler which for some reason does not get ajax request, although it writes: success: function (responce) {
$('h2').text('data sent');

$parametr_widther = $_POST['widtherr'];
echo $parametr_widther;

Answer 1

Horrible...

$(document).ready(function(){
  $('#widther, #profil, #radius, #brand').change(function () {

    var parametr_widther = $("#widther :selected").val();
    alert(parametr_widther);
    
    $.ajax({
      url: "ajaxik.php",
      cache: false,
      async: true,
      type: "POST",
      data: {widtherr: parametr_widther},
      success: function (responce){
        //$('h2').text('данные отправлены');
        console.log(responce);
      }
    });
  });

});

ajaxik.php handler:
print_r($_POST);