PHP / Ajax如何按类别名称过滤产品答案

【问题标题】：PHP / Ajax how to filter products by category namePHP / Ajax如何按类别名称过滤产品
【发布时间】：2019-06-29 15:48:38
【问题描述】：

我有两个下拉列表，顶部的一个是餐食类别，当我选择一个时，我的选项标签中有 id_cat

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

第二个下拉列表是产品列表。

当我选择一个类别时，我想用ajax更改与这个id_cat相关的产品......

我试过了，但我不知道该怎么做

  <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

【问题讨论】：

在更改时，您需要通过传递所选值来触发 api 调用。请发布最少的代码，以便我们为您提供帮助
试试这个stackoverflow.com/questions/37917636/…
这不是我想做的@Mohit Kumar

标签： javascript php mysql ajax

【解决方案1】：

如果使用 jquery 而不是普通的 JavaScript 就可以了...

首先，在页面底部为类别id创建一个监听器（所以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; ?>

（感谢简洁易读的代码）

请注意，这是我用手机在脑海中输入的。您将需要仔细检查如何使用 jquery 进行 Ajax 发布。

【讨论】：