Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 384
  • Last Modified:

Triple combo

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
ael120898
Asked:
ael120898
1 Solution
 
bebonhamCommented:
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
 
bebonhamCommented:
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
 
Nitin SontakkeCommented:
That's it. I tried this as well, the result is same. Please go with "bebonham"
0
 
danrosenthalCommented:
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
 
ael120898Author Commented:
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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