下拉隐藏和显示HTML和Javascript

大家好!我已经让我的代码显示相应的下拉菜单，根据所选的值在第一个下拉菜单上，我有我的代码像这样:

第一个下拉:

<select size="1" id="parent" class=" validate['required']" title="" type="select" name="style" >
    <option value="">-Choose-</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>                                                                

当我选择第二个下拉列表中的任何一个时例如当我选择"A"时下一个下拉列表将显示

<div id="A"  class="style-sub-1"  style="display: none;" name="stylesub1" >
        <label>A</label>
        <select id="childA">
            <option value="">-Choose-</option>
            <option value="Aa">Aa </option>
            <option value="Ab">Ab </option>
            <option value="Ac">Ac</option>
         </select>
 </div>

最后，当我再次选择例如Aa时，将显示第三个下拉框。这是第三个下拉菜单

<div id="Aa"  class="style-sub-2"  style="display: none;" name="stylesub2" >
   <label>Aa:</label>
  <select >
    <option value="">-Choose-</option>
    <option value="Aaa">Aaa</option>
    <option value="Abb">Abb </option>
    <option value="Acc">Acc</option>
 </select>

现在，我的问题是，例如，在我选择了所有这些之后，然后决定从第一个下拉列表中选择另一个值，例如B，第三个下拉列表仍然显示Aaa。当我选择一个新值时，我需要隐藏这个以避免混淆。我该怎么做呢?这是我的Javascript代码:

<script>
    $("#parent").change ( function  () {
    var targID  = $(this).find(":selected").val()
    $("div.style-sub-1").hide ();
    $('#' + targID).show ();
    } )
    $("#childA").change ( function () {
    var targID  = $(this).find(":selected").val();
    $("div.style-sub-2").hide ();
    $('#' + targID).show ();
    } )
 </script>