PHP / Ajax как фильтровать товары по названию категории

Question

У меня есть два раскрывающихся списка, один в верхней части - это категория блюд. Когда я выбираю один, у меня есть id_cat в теге опции

              <option value="1">Pâtisserie</option>
              <option value="2">Pain & spéciaux</option>

Второе раскрывающееся меню - это список продуктов.

Когда я выбираю одну категорию, Я хочу изменить продукт, связанный с этим id_cat, с помощью ajax ...

Я пытался, но понятия не имею, каксделать это

  <li>
    <label for="cat">Catégorie :</label>
    <select id="cat" name="cat">
      <?php foreach($cats as $cat): ?>
        <option value="<?= $cat['id_cat'] ?>"><?= $cat['nom_cat'] ?></option>
      <?php endforeach; ?>
    </select>
  </li>
  <li>
    <label for="meal">Nom :</label>
    <select id="meal" name="meal">
      <?php foreach($meals as $meal): ?>
        <option value="<?= $meal['Id'] ?>"><?= $meal['Name'] ?></option>
      <?php endforeach; ?>
    </select>
    <article id="meal-details" class="meal-details no-left-label">
      <img src="" alt="Photo du produit">
      <p ></p>
      <span>Prix : <strong></strong> €</span>
    </article>
  </li>

Мой SQL-запрос просто

$sql = 'SELECT
                                    *
                            FROM meal
                            WHERE id_cat = ?';

Проблема в том, как я могу отображать продукты по категориям в моем макете?

См. экран здесь: https://ibb.co/LY4TDX5

Answer 1

Если использовать jquery вместо обычного JavaScript, то все в порядке ...

Сначала создайте прослушиватель для идентификатора категории в нижней части страницы (поэтому dom уже загружен):

<script>
$(‘#cat’).on(‘change’, function() {
    loadMeals($(this).val() );
});

Теперь, сделайте Ajax-вызов и поместите результаты в приемы пищи:

var url = ‘url_for_your_php_script’;
function loadMeals(category) {
    var response = $.post(
        url,
        { category: category}
     ).done( function (data) {
        $(‘#meal’).html(data);
    });
}

</script >

Ваш PHP-скрипт должен выполнить запрос

select id, name from meal where id_cat=?

Обычно я рекомендую, чтобы скрипт php отвечал с помощью json, но для простоты этого ответа он должен вывести html для опций.

<?php foreach($meals as $meal): ?>
    <option value="<?= $meal['Id'] ?>"><?= $meal['Name'] ?></option>
 <?php endforeach; ?>

(благодарность за лаконичный, читаемый код)

Обратите внимание, это набрано с моей головы, используя мой телефон. Вы захотите перепроверить, как сделать пост Ajax с помощью jquery.