Solved

Hiding a drop down menu

Posted on 2004-04-24
3
320 Views
Last Modified: 2010-04-06
Here is my code:

<html>

<head>
<title>Add/Delete A CD</title>
<script>
function setMenu(Menu) {
      switch (Menu) {
            case 1: {
                  document.add.SpecCat.options[0].value="Pop/Rock";
                  document.add.SpecCat.options[1].value="Pop";
                  document.add.SpecCat.options[2].value="Rock";
                  document.add.SpecCat.options[3].value="Ska";
                  document.add.SpecCat.options[4].value="";
                  document.add.SpecCat.options[5].value="";
                  document.add.SpecCat.options[0].selected=true;
                  document.add.Genre[0].checked=true;
                  break;
            }
            case 2: {
                  document.add.SpecCat.options[0].value="Dance";
                  document.add.SpecCat.options[1].value="Drum and Bass";
                  document.add.SpecCat.options[2].value="House";
                  document.add.SpecCat.options[3].value="Techno";
                  document.add.SpecCat.options[4].value="Trance";
                  document.add.SpecCat.options[5].value="Other";
                  document.add.SpecCat.options[0].selected=true;
                  document.add.Genre[1].checked=true;
                  break;
            }
            case 3: {
                  
            }
      }
      setOptionText();
}

function setOptionText() {
      document.add.SpecCat.options[0].text=document.add.SpecCat.options[0].value;
      document.add.SpecCat.options[1].text=document.add.SpecCat.options[1].value;
      document.add.SpecCat.options[2].text=document.add.SpecCat.options[2].value;
      document.add.SpecCat.options[3].text=document.add.SpecCat.options[3].value;
      document.add.SpecCat.options[4].text=document.add.SpecCat.options[4].value;
      document.add.SpecCat.options[5].text=document.add.SpecCat.options[5].value;
}
</script>
</head>

<body onLoad="setMenu(1); document.add.Genre[0].checked=true">

<h1>Add/Delete a CD</h1><br><br>
To add a CD, fill out the form and click Submit.  For deleting CD's, click <a href="delete.html">HERE</a><br><br>
<form name="add" action="/myapp/IT202Assignment10/add.jsp" method="post" onReset="setMenu(1)">
<table name=add cols=3>
<tr>
      <td>CD Number:</td>
      <td><input type=text name=CDNum></td>
      <td> </td>
</tr>
<tr>
      <td>Artist:</td>
      <td><input type=text name=Artist></td>
      <td> </td>
</tr>
<tr>
      <td>Title:</td>
      <td><input type=text name=Title></td>
      <td> </td>
</tr>
<tr>
      <td>Genre:</td>
      <td><input type=radio name=Genre value=Pop/Rock onClick="setMenu(1)" selected>Pop/Rock</td>
      <td>Specific Category: <select name="SpecCat">
                                          <option value="Pop/Rock">
                                          <option value="Pop">
                                          <option value="Rock">
                                          <option value="Ska">
                                          <option value="">
                                          <option value="">
                                       </select></td>
</tr>
<tr>
      <td> </td>
      <td><input type=radio name=Genre value=Electronic onClick="setMenu(2)">Electronic</td>
      <td> </td>
</tr>
<tr>
      <td> </td>
      <td><input type=radio name=Genre value=Soundtrack onClick="setMenu(3)">Soundtrack</td>
      <td> </td>
</tr>
<tr>
      <td> </td>
      <td><input type=radio name=Genre value=Mix onClick="setMenu(3)">Mix</td>
      <td> </td>
</tr>
<tr>
      <td> </td>
      <td><input type=radio name=Genre value=Rap onClick="setMenu(3)">Rap</td>
      <td> </td>
</tr>
<tr>
      <td> </td>
      <td><input type=radio name=Genre value=Other onClick="setMenu(3)">Other - <input type=text name=otherGenre></td>
      <td> </td>
</tr>
<tr>
      <td>Year:</td>
      <td><input type=text name=Year></td>
      <td> </td>
</tr>
<tr>
      <td><input type=submit value="Submit"></td>
      <td><input type=reset value="Clear Form"></td>
      <td> </td>
</tr>
</table>
</form>

</body>

</html>


I have a different values for the drop down menu show depending on what radio button is selected.  My problem is I want to hide the drop down menu if you select any radio button but the first two. So in the setMenu function, under case 3, can I put something there to do this?
0
Comment
Question by:nitrusoxide
  • 2
3 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 125 total points
ID: 10909516
wrap a div around it:

<td><div id="layr">Specific Category: <select name="SpecCat">
                                   <option value="Pop/Rock">
                                   <option value="Pop">
                                   <option value="Rock">
                                   <option value="Ska">
                                   <option value="">
                                   <option value="">
                                 </select></div></td>

Then you can hide the layer with

document.getElementById('layr').style.visibility='hidden';

when you want to show it again ue:

document.getElementById('layr').style.visibility='visible';

Cd&
0
 

Author Comment

by:nitrusoxide
ID: 10909578
Thanks a lot, that's been bugging me for a while
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10909606
Glad I could help.  Thanks for the A. :^)

Cd&
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question