Solved

Hiding a drop down menu

Posted on 2004-04-24
3
318 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

770 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