javascript - Php/JQuery/Javascript - 选择父子依赖

Question

- - 查看这张图片。

我希望当有人选择任何类别时，子类别会根据所选的特定类别显示选项。我正在学习 PHP/MySQL，但我了解 Javascript 的基础知识。谁能以简单的方式教我如何使用 JavaScript 或 JQuery 完成它？

类别和子类别在下拉列表中显示完美，但显示所有子类别和类别。

<div>
  <label>Category</label>
  <select name="category">
    <option value="0" disabled selected>Select Category</option>
    <?php
    $cdata = $dbobj->getCategories(0);
    while($crow = mysql_fetch_array($cdata)){?>
    <option value="<?php echo $crow["categoryid"]; ?>"><?php echo $crow["category_name"]; ?></option>
    <?php } ?>
  </select>
</div>
<div>
  <label>Sub Category</label>
  <select name="subcategory">
    <option value="0" disabled selected>Select Category</option>
    <?php
    $scdata = $dbobj->getSubCategories(0);
    while($scrow = mysql_fetch_array($scdata)){?>
    <option value="<?php echo $scrow["subcategoryid"]; ?>"><?php echo $scrow["subcategory_name"]; ?></option>
    <?php } ?>
  </select>
</div>

谢谢

Categories & Sub Categories

男性

• 衣服
• 鞋子

女性

• 珠宝
• 纱丽服
• 鞋子

children

• 玩具
• 衣服

书籍

• 语言
• 小说

我想要的是 - 每当有人选择男士类别时，只有两个子类别，衣服和鞋子出现。

Answer 1

使用 JQuery:

$(function(){
    $(".category option").click(function(){
        $(".category").parent().css("display", "none"); // Targetting the parent and hide
        $(".subcategory").parent().css("display", "block"); // Targetting the parent and show
    });
    $(":not(.category option)").click(function(){
        // If click on other thing than category option then show
        $(".category").parent().css("display", "block");
    });
});

编辑:添加了返回类别的可能性