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> 

おかげ

カテゴリー&サブカテゴリー

男性

• 服
• 靴

人の

女性

• ジュエリー
• サリー
• 靴

キッズ

• おもちゃ
• 服

ブックス

• 言語
• フィクション

私は何をしたいことはある - 誰かが男性カテゴリを選択したときに、唯一の2つのサブカテゴリ、服と表示シューズ。

$(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"); 
    }); 
}); 

EDIT：jQueryのを使用して

Answer 1

は

[動的に生成されるドロップダウンリストの変更選択した値]（の