Solved

Triple combo

Posted on 2001-09-18
5
380 Views
Last Modified: 2010-05-18
Please copy and paste the code below into a new html file:

<HTML>
<HEAD>
  <SCRIPT LANGUAGE="JavaScript">
var stl=0;

function doCk()
{for (i=0;i<3;i++)
 {if (document.mysel.elements[i].selectedIndex!=0)
    stl++
 }
}

var ov = new Array()
ov[1] = new Array()
ov[1][0] = new Array("","Camaro","Malibu","Corvette","Lumina")
ov[1][1] = new Array("","Grey","Blue","Green","White","Red")
ov[1][2] = new Array("","Black","Tan","Green","Blue","Green")
ov[1][3] = new Array("","Red","Maroon","Black","Silver","White")
ov[1][4] = new Array("","White","Green","Blue","Silver","Black")

ov[2] = new Array()
ov[2][0] = new Array("","Thunderbird","Windstar","Taurus","Mustang")
ov[2][1] = new Array("","Blue","White","Grey","Red","Green")
ov[2][2] = new Array("","Red","Tan","Yellow","Maroon","Silver")
ov[2][3] = new Array("","Black","Beige","White","Blue","Green")
ov[2][4] = new Array("","Green","Grey","Yellow","Blue","White")

ov[3] = new Array()
ov[3][0] = new Array("","De Villa","Seville","Catera","Eldorado")
ov[3][1] = new Array("","White","Blue","Yellow","Silver","Black")
ov[3][2] = new Array("","Red","Blue","Silver","Green","Maroon")
ov[3][3] = new Array("","Beige","Grey","Yellow","Blue","Green")
ov[3][4] = new Array("","Blue","Red","Silver","Black","White")

var nmc = new Array()
nmc[0]=5;
nmc[1]=6;

function doMod(mo,r2)
{x=document.mysel.elements[0].selectedIndex;

 if (mo==0)
   {y=0
    if (r2==1)
      for (i=1;i<6;i++)
      {document.mysel.elements[2].options[i]=null;
       oname=new Option("-----------");
       document.mysel.elements[2].options[i]=oname;
      }
   }
  else
   y=document.mysel.elements[mo].selectedIndex;

 for (i=1;i<nmc[mo];i++)
  {document.mysel.elements[mo+1].options[i]=null;
   oname=new Option(ov[x][y][i]);
   document.mysel.elements[mo+1].options[i]=oname;
   }
}
function ckLev(no)
{if (no==stl && document.mysel.elements[no].selectedIndex!=0)
  {stl++;
   if (no!=2)
     doMod(no,0);
  }
 else
  if (no>stl)
   {alert("You have to select "+document.mysel.elements[stl].name+" first")
    document.mysel.elements[no].selectedIndex=0;
   }
   else
    if (no<stl)
      {stl=no+1;
       for (i=no+1;i<3;i++)
       {document.mysel.elements[i].selectedIndex=0}
       doMod(no,1)
       }
}
</SCRIPT>
</HEAD>
<BODY onLoad="doCk()"><FORM name="mysel">

<SELECT NAME="auto" onChange="ckLev(0)">
<B><OPTION VALUE="blank" >Select a Make.&nbsp;
<OPTION VALUE="chev">Chevrolet&nbsp;
<OPTION VALUE="ford">Ford&nbsp;
<OPTION VALUE="cad">Cadillac&nbsp;
</SELECT>

<SELECT NAME="model" onChange="ckLev(1)">
<OPTION VALUE="blank">Select a Model.&nbsp;
<OPTION VALUE="">-----------&nbsp;
<OPTION VALUE="">-----------&nbsp;
<OPTION VALUE="">-----------&nbsp;
<OPTION VALUE="">-----------&nbsp;
</SELECT>

<SELECT NAME="color" onChange="ckLev(2)">
<OPTION VALUE="blank">Select a Color.&nbsp;
<OPTION VALUE="">-----------&nbsp;
<OPTION VALUE="">-----------&nbsp;
<OPTION VALUE="">-----------&nbsp;
<OPTION VALUE="">-----------&nbsp;
<OPTION VALUE="">-----------&nbsp;
</B></SELECT>
</form>
</BODY>
</HTML>

Everything works just fine, however there is a small bug: try selecting a car brand from the first combo and then select the first option again which says "Select a Make." When doing this you get a javascript error saying that on line 56 character 4 'ov[...]' is null or not an object. What is actually wrong? Thank you.
0
Comment
Question by:ael120898
5 Comments
 
LVL 8

Expert Comment

by:bebonham
ID: 6490421
what is actually wrong is you stated array on element 1 not on element 0, like normal.

when x (selected index of first sel box is =0)

you get a script error.
0
 
LVL 8

Accepted Solution

by:
bebonham earned 150 total points
ID: 6490427
you can change the beggining of the function  like this:

function doMod(mo,r2)
{x=document.mysel.elements[0].selectedIndex;

///this is the only thing you need to add
if(x==0)
return false
/////////////
0
 
LVL 6

Expert Comment

by:Nitin Sontakke
ID: 6490463
That's it. I tried this as well, the result is same. Please go with "bebonham"
0
 
LVL 15

Expert Comment

by:danrosenthal
ID: 6492064
Change the third option on ckLev
from this:
if (no<stl)

to:
if (no<stl&&document.mysel.elements[no].selectedIndex!=0)

That should prevent any errors.
0
 

Author Comment

by:ael120898
ID: 6492578
Thank you! Both solutions, bebonham's and  danrosenthal's prevent any javascript errors. However, when selecting again the "Select a make." option from the first combo, the second and the third combo should return to their first layout where you are not allowed to select a model or a color before selecting a car make. The way it works with bebonham's and  danrosenthal's proposed solution the user can even submit data just by having the option "Select a make." selected and then select a model and color. This is not right. The user mustn't be allowed to select form the second and the third combo is he/she selects the option "Select a make." from the first combo. I hope i made myself clear. Thank you once more for your valuable help.
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
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…

810 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