简体   繁体   中英

Dropdown Hide and Show HTML and Javascript

Good Day! I already made my code show the appropriate dropdown as per the selected value on the first dropdown I have my code like this:

First Dropdown:

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

When I chose any of this secondd dropdown will show for example when i choose "A" this next dropdown will show

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

And then lastly when I choose again for example Aa, the third dropdown will be shown. This is the third dropdown

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

Now, my problem is for example after I selected all these then decided to select another value from the first dropdown, for example B, the third dropdown which is Aaa is still shown. I need to hide this when I selected a new value to avoid confusion. How can I do that? This is my Javascript code:

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

您可以应用onchange函数哦,您的下拉菜单就好像第一个下拉菜单更改显示了第二个下拉菜单,第二个下拉菜单也是如此,就像有人选择了一个值onlu一样,然后第三个下拉菜单将显示

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM