下拉菜單隱藏和顯示HTML和Javascript

Question

美好的一天！ 我已經使代碼根據第一個下拉列表中的選定值顯示適當的下拉列表，我的代碼如下所示：

第一個下拉菜單：

<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>

Answer 1

您可以應用onchange函數哦，您的下拉菜單就好像第一個下拉菜單更改顯示了第二個下拉菜單，第二個下拉菜單也是如此，就像有人選擇了一個值onlu一樣，然后第三個下拉菜單將顯示