Как обрабатывать несколько событий, связанных с тегом select, используя jquery

Question

Я создаю веб-сайт для покупок, с помощью которого я даю пользователям возможность фильтровать продукты в соответствии с категорией и ценой (от низкого до высокого и наоборот). Я реализовал это с помощью выпадающего списка.

У меня сейчас проблема с отображением продуктов. Я должен использовать AJAX для фильтрации результатов. При загрузке страницы я установил категорию по умолчанию «Все», в которой должны отображаться все продукты, и при изменении категории продукты соответствующим образом фильтруются.

Проблема в том, что я использую $("#Category option:selected").val(). Я получаю значение, когда страница загружается, и если я использую изменения, то будет действовать только изменение, но ничего не происходит со значением по умолчанию. Как мне справиться с этим?

<div class="collapse" id="filterdiv">
  <form class="d-inline">
    <select id="Category">
      <option value='' selected>All</option>
      <?php 
        $fCategory="SELECT DISTINCT Food_Type from food";
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $res=$conn->query($fCategory);

        if($res->rowCount()>0)
        {
          while($row=$res->fetch(PDO::FETCH_ASSOC))
          {
            echo "<option value=".$conn->quote($row['Food_Type']).">".$row['Food_Type']."</option>";
          }
        }
      ?>
    </select>

    <select id="price">
      <option value="">Price</option>
      <option value="lowtohigh">Low to High</option>
      <option value="hightolow">High to Low</option>
      <</select>
  </form>
</div>

<div class="row" id="result">
  <!-- I will display the result from the query here using ajax -->
</div>

Answer 1

Если вы вызовете событие изменения на select при загрузке страницы, то вызовет настроенный вами обработчик события onchange (у вас есть один, верно?)

$(document).ready( function() {
    $('#Category').trigger('change');
});