Improve company productivity with a Business Account.Sign Up

x
?
Solved

Triple combo

Posted on 2001-09-18
5
Medium Priority
?
385 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 450 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 13

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

601 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