Solved

Hide some options based on selected value

Posted on 2004-09-29
4
226 Views
Last Modified: 2008-02-26
Need some JavaScript help, I know very little about it.

I have two select items on a form:
<form id="MIUForm" action="blabla.asp" method="POST">
<select name="MIUType">
   <option value="4">xyz4
   <option value="8">xyz8
   <option value="40">xyz40
   <option value="120">x Server
   <option value="121">y Server
</select>
<select name="NumPeriods">
   <option value="288">288 (5 min)
   <option value="1440">1440 (1 min)
   <option value="96">96 (15 min)
   <option value="48">48 (30 min)
</select>

What I want is that when I select 4, 8 or 40 from the first select, only 288 and 1440 are visible in the second.  When I select 120 or 121 in the first list, only 96 and 48 should be visible in the second.
0
Comment
Question by:PaulHews
  • 2
4 Comments
 
LVL 13

Accepted Solution

by:
cLFlaVA earned 125 total points
ID: 12183460

Put this function between your <head></head> tags:

<script language="javascript">
<!--

function ChangeOptions() {
      var start = 2;
      var end = 3;
      var vA = new Array(288, 1440, 96, 48);
      var tA = new Array("288 (5 min)", "1440 (1 min)", "96 (15 min)", "48 (30 min)");
      
      var selType = document.forms['the_form'].elements['MIUType'];
      var selPers = document.forms['the_form'].elements['NumPeriods'];

      if (selType.selectedIndex < 3) {
            start = 0;
            end = 1;
      }

      selPers.options.length = 0;

      for (var i = start; i <= end; i++) {
            selPers.options.add(new Option(tA[i], vA[i]), 0);
      }
}

-->
</script>

Then call it from the onchange event of the first select box:

<select ... onchange="ChangeOptions();">
0
 
LVL 9

Assisted Solution

by:riyasjef
riyasjef earned 125 total points
ID: 12183579
try this

<script>
      function change(val)
      {
            var obj=document.getElementById("NumPeriods");
            var arr1=[288,1440,96,48];
            var arr2=["288 (5 min)","1440 (1 min)","96 (15 min)","48 (30 min)"];
            clearIt(obj);
            if(val==4 || val==8 || val==40)
            {
                  obj.options[obj.options.length] = new Option(arr2[0],arr1[0]);
                  obj.options[obj.options.length] = new Option(arr2[1],arr1[1]);
            }
            else if(val==120 || val==121)
            {
                  obj.options[obj.options.length] = new Option(arr2[2],arr1[2]);
                  obj.options[obj.options.length] = new Option(arr2[3],arr1[3]);

            }
            /*else
            {
                  for(var i=0;i<arr1.length;i++)
                        obj.options[obj.options.length] = new Option(arr2[i],arr1[i]);

            }*/
      }
      function clearIt(obj)
      {
            for(var i=obj.length-1;i>=0;i--)
                  obj.options[i]=null;
      }
</script>
<form id="MIUForm" name="MIUForm" action="blabla.asp" method="POST">
<select name="MIUType" onchange="change(this.options.value)">
   <option value="4">xyz4
   <option value="8">xyz8
   <option value="40">xyz40
   <option value="120">x Server
   <option value="121">y Server
</select>
<select name="NumPeriods">
   <option value="288">288 (5 min)
   <option value="1440">1440 (1 min)
</select>
</form>

Riyasjef
0
 
LVL 38

Author Comment

by:PaulHews
ID: 12183788
They both work.  The first one reverses the options when they are added, which is a small thing perhaps, and easy to correct by adding them in reverse order.  It's a little more compact than the second one, which works out of the box.  So I increased points and split them.  Thanks cLFlaVA and Riyasjef.
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12189465
Thank YOU Paul Hews :)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to let div toggle even if i refresh page 2 25
Jquey and footrable 2 34
JavaScript: Issue with onClick 5 34
Creating a dynamic URL - set dates to upcoming weekend 6 30
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

930 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now