?
Solved

Hide some options based on selected value

Posted on 2004-09-29
4
Medium Priority
?
232 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 13

Accepted Solution

by:
cLFlaVA earned 500 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 500 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…
Suggested Courses

777 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