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然后第三次下拉列表将显示

下拉隐藏和显示HTML和Javascript

1 个答案: