• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 235
  • Last Modified:

Hide some options based on selected value

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
PaulHews
Asked:
PaulHews
  • 2
2 Solutions
 
cLFlaVACommented:

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
 
riyasjefCommented:
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
 
PaulHewsAuthor Commented:
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
 
cLFlaVACommented:
Thank YOU Paul Hews :)
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now