下拉菜单隐藏和显示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一样，然后第三个下拉菜单将显示