Solved

Hide some options based on selected value

Posted on 2004-09-29
4
225 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
Comment Utility

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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank YOU Paul Hews :)
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

771 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