基于 parent_id 的类别的动态下拉

Posted 2023-02-24

【中文标题】基于 parent_id 的类别的动态下拉

【英文标题】：Dynamic Drop Down for categories based on parent_id

【发布时间】：2018-01-12 20:28:13

【问题描述】：

我的查询与 php 中的 Dynamic Drop Down 选项有关，您认为这可能是之前提出的现有问题，但我的情况有点典型，因为下拉菜单的所有值都将从同一张桌子

要求 -

Drop 将基于两个表的 INNER JOIN，oc_category 和 oc_category_description（用于在下拉选项字段中显示类别名称）

两个表之间的公共字段category_id

要使用的字段

oc_category -> category_id , parent_id

oc_category_description -> name

了解oc_category的STRUCTURE

Click here了解oc_category表的结构

所以在我的例子中，有 3 个级别的类别 - PRIMARY(Level 1) , SECONDARY(Level 2) & TERTIARY(Level 3)

例如 - Consumer Electronics (PRIMARY) > Mobile Phones(SECONDARY) > iPhone(TERTIARY)

现在我想要 3 个下拉菜单 -

下拉 1 -> 具有 parent_id '0' 的主要类别 下拉选项的值应为 category_id，显示的值应为 name

我当前的mysql 查询第一个下拉菜单是 -

SELECT cat.category_id, cat.parent_id, catd.name FROM oc_category AS cat INNER JOIN oc_category_description AS catd ON cat.category_id=catd.category_id

我有 15 PRIMARY CATEGORIES ，所以我想在上面的查询中使用 WHERE cat.category_id。

下拉 2 -> 具有 parent_id 的二级类别与 oc_category 表中的 PRIMARY CATEGORY 相关。

因此，一旦我选择了 PRIMARY CATEGORY，Drop Down 2 将加载链接到其父 CATEGORY 的所有 SECONDARY CATEGORIES 类别。

下拉 3 -> 具有 parent_id 与 oc_category 表中的 SECONDARY CATEGORY 相关的第三类。

因此，一旦我选择了 SECONDARY CATEGORY，Drop Down 3 将加载链接到其父 CATEGORY 的所有 TERTIARY CATEGORIES 类别。

我更喜欢在这里使用 AJAX。

仅供参考 - 共有 2339 个类别，其中有 15 个主要类别、367 个次要类别和 1957 个第三个类别 em>

提前衷心感谢所有考虑回答我的问题并给予我宝贵时间的开发人员。

【问题讨论】：

在实施本节时您真的遇到了困难吗？构建查询、表格或进行 ajax 调用？或使用下拉菜单更改事件？还是全部？

准确地说是进行 AJAX 调用和查询

我的页面名称是Category.php 你能在你的WAMP（如果使用，或其他地方）上尝试使用规定的数据库吗？因为，您的 Dummy Dropdowns 有效，但真实的却不行！我已注释掉虚拟对象并取消注释真实对象，但没有任何效果。

【参考方案1】：

$(function() 
  //var items = populateDropdowns(0);
  var items = dummyPopulateDropdowns(0, 'primary');
  $('#drp_primary').html('');
  for (var i = 0; i < items.length; i++) 
    $('#drp_primary').append($('<option value="' + items[i].category_id + '">' + items[i].name + ' </option>'));
  
);
$(document).on('change', '#drp_primary', function() 
  var mainCategory = $(this).val();
  //var items = populateDropdowns(mainCategory);
  var items = dummyPopulateDropdowns(mainCategory, 'secondary');
  $('#drp_secondary').html('');
  for (var i = 0; i < items.length; i++) 
    $('#drp_secondary').append($('<option value="' + items[i].category_id + '">' + items[i].name + ' </option>'));
  
);
$(document).on('change', '#drp_secondary', function() 
  var secondaryCategory = $(this).val();
  //var items = populateDropdowns(secondaryCategory);
  var items = dummyPopulateDropdowns(secondaryCategory, 'tertiory');
  $('#drp_tertiory').html('');
  for (var i = 0; i < items.length; i++) 
    $('#drp_tertiory').append($('<option value="' + items[i].category_id + '">' + items[i].name + ' </option>'));
  
);

function populateDropdowns(parentID) 
  var items = [];
  $.ajax(
    url: "your url with",
    data: 
      mainCategoryID: parentID
    ,
    async: false,
    success: function(result) 
      items = result;

    
  );
  return items;


function dummyPopulateDropdowns(parentID, drpdwn) 
  var items = [];
  if (drpdwn == 'primary') 
    items.push(
      category_id: 0,
      name: 'Baby Products'
    , 
      category_id: 1,
      name: 'Consumer Electronics'
    );
   else if (drpdwn == 'secondary') 
    items.push(
      category_id: 10,
      name: 'Land Phones'
    , 
      category_id: 11,
      name: 'Mobile Phones'
    );
   else if (drpdwn == 'tertiory') 
    items.push(
      category_id: 100,
      name: 'Iphone'
    , 
      category_id: 101,
      name: 'Blackbery'
    );
  
  return items;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='drp_primary'>
</select>
<br />
<select id='drp_secondary'>
</select>
<br />
<select id='drp_tertiory'>
</select>

这部分解释了如何处理下拉和 ajax 调用。 在这里确保注释行 'dummyPopulateDropdowns(0, 'primary');'并取消注释 'populateDropdowns' 以便您可以进行真正的 ajax 调用，替换您的 url。

主要 - 查询

SELECT cat.category_id, cat.parent_id, catd.name 
FROM oc_category AS cat 
INNER JOIN oc_category_description AS catd 
   ON cat.category_id = catd.category_id
WHERE parent_id = 0

二级和三级 - QUERY

SELECT cat.category_id, cat.parent_id, catd.name 
FROM oc_category AS cat 
INNER JOIN oc_category_description AS catd 
   ON cat.category_id = catd.category_id
WHERE parent_id = <SELECTED CATEGORY ID>

我不擅长编写php代码，希望社区中的其他人帮助您修改此代码以使其适合您。

注意 dummyPopulateDropdowns 方法仅用于用粗略的数据填充下拉列表。

【讨论】：

url : "你的 url with"，用什么来代替？

喜欢带有参数 mainCategoryID 的 'localhost:1989/Items/GetCategory'。我不确定您是否从本地主机运行您的应用程序。所以适当替换。

SELECT cat.category_id, cat.parent_id, catd.name FROM oc_category AS cat INNER JOIN oc_category_description AS catd ON cat.category_id = catd.category_id WHERE parent_id = <SELECTED CATEGORY ID> 这里用 替换什么？

您能否更准确地说明我应该如何命名这些查询以及我应该使用 IF 和 WHILE 语句with mysqli_fetch_array 另外，这些查询如何链接到 AJAX 函数？