Question

我有两个下拉列表，顶部是膳食类别，选择一个时，我的选项标签中有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

Answer 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发布。

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

1 个答案: