Home/ Questions/Q 3441498
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T08:33:37+00:00

I have a drop down menu consisting of animals. I would like to do

  • 0

I have a drop down menu consisting of animals. I would like to do something like, choose an animal from the dropdown menu, for example, dog. Then it will display something on a button with a value ‘bark’. After that, I would like to choose another animal for example, cat. Then it will display something on a button with a value ‘meow’. What I wanna do is, after I have clicked on the dropdown menu for cat(another animal). How can I hide the value of the dog(Which is bark). Because what I did now, the value of the dog(bark) will still be displayed even after I choose the animal, cat. Thanks! Here’s the code below… 

<body>

    <script type="text/javascript">
    var timeout = 50;
var closetimer  = 0;
var ddmenuitem  = 0;

// open hidden layer
function mopen(id)
{   
    // cancel close timer
    mcancelclosetime();

    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
    closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
    if(closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

// close layer when click-out
document.onclick = mclose; 
    </script>

    <div id ="top1" style="position:absolute; top:1; left:80; z-index:1">

<ul id="sddm">
<li><a href="#" 
    onmouseover="mopen('m1')" 
    onmouseout="mclosetime()">Animals</a>
    <div id="m1" 
        onmouseover="mcancelclosetime()" 
        onmouseout="mclosetime()">
    <a href="#" onclick="$('#chkdog').show(); return false;">Dog</a>
    <a href="#" onclick="$('#chkcat').show(); return false;">Cat</a>
</div>
</li>
</ul>

<input id="chkdog" type="button" value="Bark" style="display:none;"> <br>
<input id="chkcat" type="button" value="Meow" style="display:none;"> <br>


</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add a class to the “action” buttons (bark, meow), and do this on the onclicks:

    `<a href="#" onclick="$('input.yourclassname').hide().filter('#chkdog').show(); return false;">Dog</a>

    Look at it working here.

    • 0