Hide/Show

Question

design.eng 0 Newbie Poster

13 Years Ago

I have one drop down menu, with cars, vans, motors. If you would select cars you see the next dropdown of van1,van2 and van3. If you select cars the next drop down will appear car1,car2, and car3. And if you would select motors you will see motor1,motor2 or motor3. the only resutl I get is one menu appears with this script. How can I make it for many menus????

Here is the function tht I have been trying with no results:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<script type="text/javascript">
        function toggleVisibility(controlId)
        {
            var control = document.getElementById(controlId);
            if(control.style.visibility == "visible" || control.style.visibility == "")
                control.style.visibility = "hidden";
            else 
                control.style.visibility = "visible";
              
        }
    </script>
<title>ShowHideControl</title>

</head>
<body>


<Select name="test" onchange="toggleVisibility('');">
  <option value="1"> cars</option>
  <option value="2"> vans</option>
  <option value="3"> motors</option>
  </Select>
  
<Select name="cars" id="cars">
  <option value="1">car1 </option>
  <option value="2">car2</option>
  <option value="3">car3</option>
  </Select>
  </br>
  
<Select name="vans" id="vans">
  <option value="1"> van1</option>
  <option value="2"> van2</option>
  <option value="3"> van33</option

</select>
<td>
<Select name="motors" id="motors">
  <option value="1"> motor1</option>
  <option value="2"> motor2</option>
  <option value="3"> motor3</option>

</select>
</td>
</body>
</html>

Any help would be truly appreciated. Thank you in advance for your time.

javascript

3 Contributors
9 Replies
138 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by scrappedcola

All 9 Replies

scrappedcola 11 Posting Whiz in Training

13 Years Ago

First off your script won't hide/show anything because your function is expecting an id and tries to use that id to grab an element by id and work off it's hide show. You are sending it an empty string so it won't do anything. You need to do two things. First set the values of the driving select box options to be the id of the selects that you want to hide/show. Then you will need to send the selected index of the driving drop down to the toggleVisibility function so that it can check to hide or show. For example:

<Select name="test" onchange="toggleVisibility(this.options[this.selectedIndex]);">
  <option value="cars"> cars</option>

The last thing you need to do is change the name of all the selects that you want to hide/show to be the same (something like hiddenMenu). That way you can grab them all in the toggleVisibility function and only show the menu that was selected in the test drop down. For example:

<Select name="hiddenMenu" id="cars">
<Select name="hiddenMenu" id="vans">
<Select name="hiddenMenu" id="motors">

<script type="text/javascript">
  function toggleVisibility(controlId)
  {
     /* grab all the selects and hide if not the selected and show if it is */
     var hiddenMenu = document.getElementsByName('hiddenMenu');
     for(var i = 0; i < hiddenMenu.length; i++)
     {
         if(hiddenMenu[i].id != controlId)
         {
             hiddenMenu[i].style.visibility = "hidden";
          }else{
             hiddenMenu[i].style.visibility = "visible";
          }
     }
   }
 </script>

Finally depending on your design you may want to change from visibility to display. The visibility just hides the elements from view but they still take up space on the page. If you use display = "none" and display = "" instead they are hidden and they no longer take up space on the page.

scrappedcola 11 Posting Whiz in Training

13 Years Ago

Sorry forgot to tell you to change the control id check in the function. Try this (this is the cut and paste of my test code).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
script type="text/javascript">
  function toggleVisibility(control)
  {
     /* grab all the selects and hide if not the selected and show if it is */
     var hiddenMenu = document.getElementsByName('hiddenMenu');
	 var controlId = control.id;
	 var controlVal = control.value;

 for(var i = 0; i < hiddenMenu.length; i++)
     {
         if(hiddenMenu[i].id != controlVal)
         {
             hiddenMenu[i].style.visibility = "hidden";
          }else{
             hiddenMenu[i].style.visibility = "visible";
          }
     }
   }
 </script>
 <style>
 #cars,
 #vans,
 #motors
 {
	visibility:hidden;
}
</style>
  <title>
  Untitled Document
  </title>
  </head>
  <body>
  <Select name="test" onchange="toggleVisibility(this.options[this.selectedIndex]);">
  <option>&nbsp;</option>
  <option value="cars"> cars</option>
  <option value="vans"> vans</option>
  <option value="motors"> motors</option>
</Select>
<Select name="hiddenMenu" id="cars">
  <option value="1">car1 </option>
  <option value="2">car2</option>
  <option value="3">car3</option>
</Select>
</br>
<Select name="hiddenMenu" id="vans">
  <option value="1"> van1</option>
  <option value="2"> van2</option>
  <option value="3"> van33</option
 
>
</select>
<td><Select name="hiddenMenu" id="motors">
    <option value="1"> motor1</option>
    <option value="2"> motor2</option>
    <option value="3"> motor3</option>
  </select>
</td>
</body></html>

scrappedcola 11 Posting Whiz in Training

13 Years Ago

<Select name="test" onchange="toggleVisibility(this.options[this.selectedIndex]);">
  <option>&nbsp;</option>
  <option value="cars"> cars</option>
  <option value="vans"> vans</option>
  <option value="motors"> motors</option>
</Select>

What we are doing here is on the change of the drop down we are calling the function "toggleVisibility". We are going to send it the parameter this.options[this.selectedIndex]. The "this" in the param refers to the element that triggered the event (the select element named "test". The options references the child nodes of type option. This is an array of values and to find the one that is currently selected we use this.selectedIndex. The property selectedIndex is a DOM value on the select box that is an integer type that tells us which option is selected.

function toggleVisibility(control)
  {
     /* grab all the selects and hide if not the selected and show if it is */
     var hiddenMenu = document.getElementsByName('hiddenMenu');
	var controlVal = control.value;
 
 for(var i = 0; i < hiddenMenu.length; i++)
     {
         if(hiddenMenu[i].id != controlVal)
         {
             hiddenMenu[i].style.visibility = "hidden";
          }else{
             hiddenMenu[i].style.visibility = "visible";
          }
     }
   }

When we get into the toggleVisibility function we first grab all of the select items that we gave the name 'hiddenMenu' (this is returned as an array). We also get the value of the option that we passed to this function on the on change event (the id was legacy from your initial code and is unnecessary). The value we get here is the id of the drop down that we want to show. We then loop through the hiddenMenu array and check each elements id against the id we grabbed off our desired drop down. In this case the "." accesses the property "id" of the dom element hiddenMenu. When we find what we are looking for we show it by using: hiddenMenu.style.visibility = "hidden". This states set the property style which has the property visibility to "hidden". Like I mentioned before this just hides the item and doesn't remove it from the allocated space. if you added a visible element next to the hidden drop downs you would see white space between the two drop downs. If we had set hiddenMenu.style.display = "none" instead of using the visibility property we would not get that spacing as "none" basically removes the element from the visible document (it is still in the dom).

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

design.eng 0 Newbie Poster · Answer 1 · 2010-07-14T22:56:42+00:00

thanks alot scrappedcola: but I have tried the code but it dosen't work with me.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
  function toggleVisibility(controlId)
  {
     /* grab all the selects and hide if not the selected and show if it is */
     var hiddenMenu = document.getElementsByName('hiddenMenu');
     for(var i = 0; i < hiddenMenu.length; i++)
     {
         if(hiddenMenu[i].id != controlId)
         {
             hiddenMenu[i].style.visibility = "hidden";
          }else{
             hiddenMenu[i].style.visibility = "visible";
          }
     }
   }
 </script>


  <title>
  Untitled Document
  </title>
  </head>
  <body>
  <Select name="test" onchange="toggleVisibility(this.options[this.selectedIndex]);">
  <option value="1"> cars</option>
  <option value="2"> vans</option>
  <option value="3"> motors</option>
</Select>
<Select name="hiddenMenu" id="cars">
  <option value="1">car1 </option>
  <option value="2">car2</option>
  <option value="3">car3</option>
</Select>
</br>
<Select name="hiddenMenu" id="vans">
  <option value="1"> van1</option>
  <option value="2"> van2</option>
  <option value="3"> van33</option

>
</select>
<td><Select name="hiddenMenu" id="motors">
    <option value="1"> motor1</option>
    <option value="2"> motor2</option>
    <option value="3"> motor3</option>
  </select>
</td>
</body></html>

design.eng 0 Newbie Poster · Answer 2 · 2010-07-15T02:33:14+00:00

Thanks so much ScrappedCola! it does work accurately. It's really something!

Another thing, why you don't make a tutorial about making javascript script as that.
More,explain why the script structure like that hiddenMenu.style.visibility = "hidden". What I mean the dots mean in that script!

design.eng 0 Newbie Poster · Answer 3 · 2010-07-15T02:36:25+00:00

And why the structure of this script like this toggleVisibility(this.options[this.selectedIndex]) and wht it dose!

You know, something brief or in detail to enhance our knowledge. :D :D ;)

design.eng 0 Newbie Poster · Answer 4 · 2010-07-15T11:27:22+00:00

design.eng 0 Newbie Poster

13 Years Ago

Thanks alot for the explaination!

rajarajan2017 · Answer 5 · 2010-07-15T12:14:41+00:00

Hi scrappedcola, why not you place you display drop down box in a particular position, instead of showing in different places? that even looks better r8?

scrappedcola 11 Posting Whiz in Training · Answer 6 · 2010-07-15T21:42:25+00:00

Rajarajan I was working off the code sample that he already posted and wanted to stay as close to that as possible since it was fairly simple to begin with. Personally I would have used display:none which would have achieved that affect rather than the visibility:hidden which leaves all pieces in the visible space.

Hide/Show

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers