...

View Full Version : HELP!! Triple Combo



ezrian
12-09-2010, 08:20 AM
Hi ' I'm trying to make that script (http://javascriptkit.com/script/script2/triplecombo.shtml) working for hours and I havent being able to make the third box working... Please help me.

Here's my code :


<textarea name="Probleme" cols="54" rows="4" id="Probleme"><FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11"> &nbsp;

<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>-Produit-</option>
<option>Battant</option>
<option>Coulissante</option>
<option>Guillotine simple</option>
<option>Auvent</option>
<option>Imposte</option>
<option>Porte d'entré</option>
<option>Porte Patio</option>
<option>Porte Jardin</option>
<option>Porte de garage</option>
</select>

<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=>-Spécification 1-</option>
</select>

<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=>-Spécification 2-</option>
</select>

<script>
<!--

/*
Triple Combo Script Credit
By Hamid Cheheltani/ JavaScript Kit (http://www.javascriptkit.com)
Visit http://javascriptkit.com for this and over 400+ other scripts
*/
var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("-Spécification 1-")

group[1][0]=new Option("-Spécification 1-")
group[1][1]=new Option("PVC")
group[1][2]=new Option("Combo Aluminium")
group[1][3]=new Option("Combo PVC")

group[2][0]=new Option("-Spécification 1-")
group[2][1]=new Option("PVC")
group[2][2]=new Option("Bois")
group[2][3]=new Option("Combo PVC")
group[2][4]=new Option("Combo Aluminium")

group[3][0]=new Option("-Spécification 1-")
group[3][1]=new Option("PVC")
group[3][2]=new Option("Combo Aluminium")
group[3][3]=new Option("Combo PVC")

group[4][0]=new Option("-Spécification 1-")

group[5][0]=new Option("-Spécification 1-")

group[6][0]=new Option("-Spécification 1-")
group[6][1]=new Option("1 side")
group[6][2]=new Option("2 side")

group[7][0]=new Option("-Spécification 1-")
group[7][1]=new Option("5 pouces")
group[7][2]=new Option("6 pouces")
group[7][3]=new Option("7 pouces")
group[7][4]=new Option("8 pouces")
group[7][5]=new Option("9 pouces")

group[8][0]=new Option("-Spécification 1-")
group[8][1]=new Option("5 pouces")
group[8][2]=new Option("6 pouces")
group[8][3]=new Option("7 pouces")
group[8][4]=new Option("8 pouces")
group[8][5]=new Option("9 pouces")

group[9][0]=new Option("-Spécification 1-")
group[9][1]=new Option("Torsion")
group[9][2]=new Option("Extension")

var temp=document.isc.stage2


function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}



var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
secondGroup[i][j]=new Array() }}

secondGroup[0][0][0]=new Option("-Spécification 2-")

secondGroup[1][0][0]=new Option("-Spécification 2-")

secondGroup[2][0][0]=new Option("-Spécification 2-")

secondGroup[3][0][0]=new Option("-Spécification 2-")

secondGroup[4][0][0]=new Option("-Spécification 2-")

secondGroup[5][0][0]=new Option("-Spécification 2-")

secondGroup[6][0][0]=new Option("-Spécification 2-")

secondGroup[6][1][0]=new Option("-Spécification 2-")
secondGroup[6][1][1]=new Option("Blanc")
secondGroup[6][1][2]=new Option("Couleur")

secondGroup[6][2][0]=new Option("-Spécification 2-")
secondGroup[6][2][1]=new Option("Blanc")
secondGroup[6][2][2]=new Option("Couleur")

secondGroup[6][3][0]=new Option("-Spécification 2-")
secondGroup[6][3][1]=new Option("Blanc")
secondGroup[6][3][2]=new Option("Couleur")

secondGroup[6][4][0]=new Option("-Spécification 2-")
secondGroup[6][4][1]=new Option("Blanc")
secondGroup[6][4][2]=new Option("Couleur")

secondGroup[6][5][0]=new Option("-Spécification 2-")
secondGroup[6][5][1]=new Option("Blanc")
secondGroup[6][5][2]=new Option("Couleur")

secondGroup[7][0][0]=new Option("-Spécification 2-")

secondGroup[7][1][0]=new Option("-Spécification 2-")
secondGroup[7][1][1]=new Option("Blanc")
secondGroup[7][1][2]=new Option("Couleur")

secondGroup[7][2][0]=new Option("-Spécification 2-")
secondGroup[7][2][1]=new Option("Blanc")
secondGroup[7][2][2]=new Option("Couleur")

secondGroup[7][3][0]=new Option("-Spécification 2-")
secondGroup[7][3][1]=new Option("Blanc")
secondGroup[7][3][2]=new Option("Couleur")

secondGroup[7][4][0]=new Option("-Spécification 2-")
secondGroup[7][4][1]=new Option("Blanc")
secondGroup[7][4][2]=new Option("Couleur")

secondGroup[7][5][0]=new Option("-Spécification 2-")
secondGroup[7][5][1]=new Option("Blanc")
secondGroup[7][5][2]=new Option("Couleur")

secondGroup[8][0][0]=new Option("-Spécification 2-")

secondGroup[8][1][0]=new Option("-Spécification 2-")
secondGroup[8][1][1]=new Option("Blanc")
secondGroup[8][1][2]=new Option("Couleur")

secondGroup[8][2][0]=new Option("-Spécification 2-")
secondGroup[8][2][1]=new Option("Blanc")
secondGroup[8][2][2]=new Option("Couleur")

secondGroup[8][3][0]=new Option("-Spécification 2-")
secondGroup[8][3][1]=new Option("Blanc")
secondGroup[8][3][2]=new Option("Couleur")

secondGroup[8][4][0]=new Option("-Spécification 2-")
secondGroup[8][4][1]=new Option("Blanc")
secondGroup[8][4][2]=new Option("Couleur")

secondGroup[8][5][0]=new Option("-Spécification 2-")
secondGroup[8][5][1]=new Option("Blanc")
secondGroup[8][5][2]=new Option("Couleur")

secondGroup[9][0][0]=new Option("-Spécification 2-")

secondGroup[9][1][0]=new Option("-Spécification 2-")
secondGroup[9][1][1]=new Option("Avec fenêtres")
secondGroup[9][1][2]=new Option("Sans fenêtres")

secondGroup[9][2][0]=new Option("-Spécification 2-")
secondGroup[9][2][1]=new Option("Avec fenêtres")
secondGroup[9][2][2]=new Option("Sans fenêtres")

var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}

function redirect2(z){
window.location=temp1[z].value
}

//-->
</script>

</td>
</tr>
</table>
</FORM></textarea>

Philip M
12-09-2010, 09:18 AM
As far as I can see this script has a defect which prevents it working when a second stage option has a length greater than the first stage option.

It is old and inefficient code anyway - I suggest you junk it and use:-


<html>
<head>

<script type="text/javascript">

var categories = [];
categories["startList"] = ["Apparel","Books"]
categories["Apparel"] = ["Men","Women"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];
categories["Men"] = ["Shirts","Ties","Belts","Hats"];
categories["Women"] = ["Blouses","Skirts","Scarves"];
categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science","Romance"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];

var nLists = 3; // number of lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
}

function init() {
fillSelect('startList',document.forms[0]['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>

<body>
<form action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)">
<option selected >Make a selection</option>
</select>
</form>

</body>
</html>

“I don't pretend we have all the answers. But the questions are certainly worth thinking about..” - Arthur C. Clarke quotes (English Writer of science fiction, b.1917

ezrian
12-10-2010, 06:39 AM
Thank you for the help, it's working just fine!

jmrker
12-10-2010, 06:14 PM
Pretty neat "Phillip M".

Have one question, if you don't mind ...
In the following portion of the 'fillSelect' function ...


function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}

How is the 'step' variable being formed?

My assumption is that the number (1-3) is being removed from "List1"..."List3",
but then that string is converted to a Number. Why does than not result in a NaN?

Ahh: never mind. I just noticed that the check is with a \D, not a \d.
So the "List" portion is removed from "List1"..."List3", leaving only a digit (1..3) which the Number function is operating on.

OK, a different question:
In the following ternary statement ...


navigator.appName == "Microsoft Internet Explorer"
? attachEvent('onload', init, false)
: addEventListener('load', init, false);

... is the check for the .appName always going to work for all browsers? including mobile devices?

Philip M
12-10-2010, 06:53 PM
In the following ternary statement ...


navigator.appName == "Microsoft Internet Explorer"
? attachEvent('onload', init, false)
: addEventListener('load', init, false);

... is the check for the .appName always going to work for all browsers? including mobile devices?

I am afraid that I do not have any experience of mobile devices, so I do not know the answer. :cool:

ezrian
12-13-2010, 08:43 AM
I'm afraid I have a problem again, I want to have 2 "starlist" but the second take over the first. Thank you for you help.

Here's the code :


<html>
<head>
<script type="text/javascript">

var categories = [];
categories["startList"] = ["Battant","Coulissante","Guillotine_simple","Auvent","Imposte","Porte_d'entrée","Porte_Patio","Porte_Jardin","Porte_de_garage"]
categories["Battant"] = ["PVC","Combo Aluminium","Combo PVC"];
categories["Coulissante"] = ["PVC","Bois","Combo Aluminium","Combo PVC"];
categories["Guillotine_simple"] = ["PVC","Combo Aluminium","Combo PVC"];
categories["Porte_d'entrée"] = ["1 side","2 side"];
categories["Porte_Patio"] = ["5 pieds","6 pieds","7 pieds","8 pieds","9 pieds"];
categories["Porte_Jardin"] = ["5 pieds","6 pieds","7 pieds","8 pieds","9 pieds"];
var nLists = 3; // number of lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(L3, L2, L1) {
}

function init() {
fillSelect('startList',document.forms[0]['List5'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>

<script type="text/javascript">

var categories = [];
categories["startList"] = ["Torsion","Extension"]
categories["Torsion"] = ["Avec Fenêtre","Sans Fenêtre"];
categories["Extension"] = ["Avec Fenêtre","Sans Fenêtre"];
categories["Avec Fenêtre"] = ["Avec Moteur","Sans Moteur"];
categories["Sans Fenêtre"] = ["Avec Moteur","Sans Moteur"];
var nLists = 3; // number of lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(L3, L2, L1) {
}

function init() {
fillSelect('startList',document.forms[0]['pgarage5'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>
<body>
<form action="">
<p>
<select name='List5' id="List5" onChange="fillSelect(this.value,this.form['List6'])">
<option selected>Produit</option>
</select>
&nbsp;
<select name='List6' id="List6">
<option selected>Sp&eacute;cification</option>
</select>
</p>
<p>
<select name='pgarage5' id="pgarage5" onchange="fillSelect(this.value,this.form['pgarage6'])">
<option selected>Type</option>
</select>
&nbsp;
<select name='pgarage6' id="pgarage6" onchange="fillSelect(this.value,this.form['pgarage7'])">
<option selected>Fenêtre</option>
</select>
&nbsp;
<select name='pgarage7' id="pgarage7" onchange="getValue(this.value, this.form['pgarage6'].value, this.form['pgarage5'].value)">
<option selected >Moteur</option>
</select>
</p>
</form>
</body>
</html>

Philip M
12-13-2010, 09:19 AM
You are trying to run the same script twice on the same page. That cannot be done as it results in duplicate function and variable names, so the second script over-writes the first. You must rename all the functions and variables in the second script with a letter suffix to, e.g:-


var categoriesB = [];
var nListsB = 3;

You have also messed it up by renaming the select lists to pgarage5 etc. They must be named List1, List2 etc. (with numeric suffix 1,2,3 etc.) in each set of select boxes unless you alter the code elsewhere to suit. To avoid a clash you must make the second set of names ListB1, ListB2 etc. and then in the second script:-



function fillSelectB(currCatB, currListB){
var stepB = Number(currListB.name.replace(/\D/g,"")); // capture the suffix digit
for (iB = stepB; iB<nListsB+1; iB++) {
document.forms[0]['ListB'+iB].length = 1;
document.forms[0]['ListB'+iB].selectedIndex = 0;
}

You cannot have two functions named init(). You must rename one to initB() or preferably combine them into one.

My advice would be to get the second startlist working independently with the renamed functions and variables, in other words without the first one, and only attempt to combine both together on your page after that.



All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

ezrian
12-14-2010, 05:16 AM
So I tried your idea of making the second list work independently first, but I can't get it to work, and I can't figure out why... Thank's again.



<html>
<head>
<script type="text/javascript">

/*
Triple Combo Script Credit
By Philip M: http://www.codingforums.com/member.php?u=186
Visit http://javascriptkit.com for this and over 400+ other scripts
*/

var categoriesB = [];
categoriesB["startListB"] = ["Wearing Apparel","Books"]
categoriesB["Wearing Apparel"] = ["Men","Women","Children"];
categoriesB["Books"] = ["Biography","Fiction","Nonfiction"];
categoriesB["Men"] = ["Shirts","Ties","Belts","Hats"];
categoriesB["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
categoriesB["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];
categoriesB["Biography"] = ["Contemporay","Historical","Other"];
categoriesB["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
categoriesB["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];

var nListsB = 3; // number of select lists in the set

function fillSelectB(currCatB, currListB){
var stepB = Number(currListB.name.replace(/\D/g,"")); // capture the suffix digit
for (iB = stepB; iB<nListsB+1; iB++) {
document.forms[0]['ListB'+iB].length = 1;
document.forms[0]['ListB'+iB].selectedIndex = 0;
}
var nCatB = categoriesB[currCatB];
for (each in nCatB) {
var nOptionB = document.createElement('optionB');
var nDataB = document.createTextNode(nCatB[each]);
nOptionB.setAttribute('valueB',nCatB[each]);
nOptionB.appendChild(nDataB);
currListB.appendChild(nOptionB);
}
}

function getValueB(L3, L2, L1) {
}

function initB() {
fillSelectB('startListB',document.forms['tripleplay']['ListB1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>
<body>
<form name="tripleplay" action="">
<select name='ListB1' onchange="fillSelect(this.value,this.form['ListB2'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='ListB2' onchange="fillSelect(this.value,this.form['ListB3'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='ListB3' onchange="getValue(this.value, this.form['ListB2'].value,
this.form['ListB1'].value)">
<option selected >Make a selection</option>
</select>
</form>
</body>
</html>

Philip M
12-14-2010, 08:43 AM
You have appended the B suffix to some Javascript keywords, you should have done this only to function and variable names (names that you chose). And missed some function names out. This works now and ought to continue to work when you replace the various options by your own.

Although function getValueB() simply alerts the choices, you will need that to pass the chosen options to whatever server-side script is involved.


var nListsB = 3; // number of select lists in the set

function fillSelectB(currCatB, currListB){
var stepB = Number(currListB.name.replace(/\D/g,"")); // capture the suffix digit
for (iB = stepB; iB<nListsB+1; iB++) {
document.forms[0]['ListB'+iB].length = 1;
document.forms[0]['ListB'+iB].selectedIndex = 0;
}
var nCatB = categoriesB[currCatB];
for (each in nCatB) {
var nOptionB = document.createElement('option');
var nDataB = document.createTextNode(nCatB[each]);
nOptionB.setAttribute('value',nCatB[each]);
nOptionB.appendChild(nDataB);
currListB.appendChild(nOptionB);
}
}

function getValueB(L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
}

function initB() {
fillSelectB('startListB',document.forms['tripleplay']['ListB1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', initB, false) : addEventListener('load', initB, false);

</script>
</head>
<body>
<form name="tripleplay" action="">
<select name='ListB1' onchange="fillSelectB(this.value,this.form['ListB2'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='ListB2' onchange="fillSelectB(this.value,this.form['ListB3'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='ListB3' onchange="getValueB(this.value, this.form['ListB2'].value,
this.form['ListB1'].value)">
<option selected >Make a selection</option>
</select>

ezrian
01-22-2011, 01:21 AM
Hi, it's me again. I've done some changes on my web page and I would need 4 stage I tried to modify the script but I can't get pass de stage 3, the alert pop-up to soon... Thank you again for your help.


<script type="text/javascript">
<html>
<head>
<form name="tripleplay" method="post" action="sendmail.php">

var categories = [];
categories["startList"] = ["Battant","Coulissante","Guillotine simple","Auvent","Imposte","Porte d'entrée","Porte Patio","Porte Jardin"]
categories["Battant"] = ["PVC","Combo Aluminium","Combo PVC"];
categories["Coulissante"] = ["PVC","Bois","Combo Aluminium","Combo PVC"];
categories["Guillotine simple"] = ["PVC","Combo Aluminium","Combo PVC"];
categories["Auvent"] = ["PVC","Combo Aluminium","Combo PVC"];
categories["Imposte"] = ["PVC","Combo Aluminium","Combo PVC"];
categories["Porte d'entrée"] = ["1 side","2 side"];
categories["Porte Patio"] = ["5 pieds","6 pieds","7 pieds","8 pieds","9 pieds"];
categories["Porte Jardin"] = ["5 pieds","6 pieds"];
categories["PVC"] = ["carr complet","carr contour","carr haut"];
categories["Combo Aluminium"] = ["carr complet","carr contour","carr haut"];
categories["Combo PVC"] = ["carr complet","carr contour","carr haut"];
categories["Combo PVC"] = ["carr complet","carr contour","carr haut","Bois"];
categories["carr complet"] = ["Clair","Low e argon"];
var nLists = 4; // number of lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(L4, L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4);
}

function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
</head>

<select name='List1' onChange="fillSelect(this.value,this.form['List2'])">
<option selected>Produit</option>
</select>
&nbsp;
<select name='List2' onChange="fillSelect(this.value,this.form['List3'])">
<option selected>Spécification</option>
</select>
&nbsp;
<select name='List3' onChange="getValue(this.value, this.form['List2'].value,
this.form['List1'].value)">
<option selected >Spécification</option>
</select>
<select name='List4' id="List4" onChange="getValue(this.value, this.form['List3'].value,
this.form['List2'].value, this.form['List1'].value)">
<option selected >Sp&eacute;cification</option>
</select>
</p> </td>
<td width="129" rowspan="2" bgcolor="#CCCCCC"><div align="center">
<input name="Largeur4" type="text" id="Largeur4" size="2">
X
<input name="Hauteur4" type="text" id="Hauteur4" size="2">
</div></td>
<td width="75" rowspan="2" bgcolor="#CCCCCC"><div align="center">
<input name="Quantite4" type="text" id="Quantite4" size="2">
</div></td>
<td width="100" rowspan="2" bgcolor="#CCCCCC"><input name="Boite_1" type="text" id="Boite_1" size="8">
<select name="Boite1" id="Boite1">
<option selected>rec 1 côté</option>
<option>rec 2 côté</option>
</select></td>
</form>
</html>

jmrker
01-22-2011, 05:33 AM
I'm having trouble reading your language, so this is just a proof of concept.
Modified 'Philip M's code to add the extra level and labeled the descriptions as various "Level_x_y_z" etc.

I could not think of any example that would need to dive into that many levels.



<html>
<head>

<script type="text/javascript">

var categories = [];
categories["Level"] = ["Level_1_1","Level_1_2"]

categories["Level_1_1"] = ["Level_2_1","Level_2_2"];
categories["Level_1_2"] = ["Level_2_3","Level_2_4","Level_2_5"];

categories["Level_2_1"] = ["Level_3_1","Level_3_2","Level_3_3","Level_3_4"];
categories["Level_2_2"] = ["Level_3_5","Level_3_6","Level_3_7"];
categories["Level_2_3"] = ["Level_3_8","Level_3_9","Level_3_10"];
categories["Level_2_4"] = ["Level_3_11","Level_3_12"];
categories["Level_2_5"] = ["Level_3_13","Level_3_14","Level_3_15", "Level_3_16"];

categories["Level_3_1"] = ["Level_4_A","Level_4_B","Level_4_C", "Level_4_D"];
categories["Level_3_2"] = ["Level_4_E","Level_4_F","Level_4_G", "Level_4_H"];
categories["Level_3_3"] = ["Level_4_I","Level_4_J","Level_4_K", "Level_4_L"];
categories["Level_3_4"] = ["Level_4_M","Level_4_N","Level_4_O", "Level_4_P"];
categories["Level_3_5"] = ["Level_4_Q","Level_4_R","Level_4_S", "Level_4_T"];
categories["Level_3_6"] = ["Level_4_U","Level_4_V","Level_4_W", "Level_4_X"];
categories["Level_3_7"] = ["Level_4_Y","Level_4_Z","Level_4_A1", "Level_4_B1"];
categories["Level_3_8"] = ["Level_4_C1","Level_4_D1","Level_4_E1", "Level_4_F1"];
categories["Level_3_9"] = ["Level_4_a","Level_4_b","Level_4_c", "Level_4_d"];
categories["Level_3_10"] = ["Level_4_e","Level_4_f","Level_4_g", "Level_4_h"];
categories["Level_3_11"] = ["Level_4_i","Level_4_j","Level_4_k", "Level_4_l"];
categories["Level_3_12"] = ["Level_4_m","Level_4_n","Level_4_o", "Level_4_p"];
categories["Level_3_13"] = ["Level_4_q","Level_4_r","Level_4_s", "Level_4_t"];
categories["Level_3_14"] = ["Level_4_u","Level_4_v","Level_4_w", "Level_4_x"];
categories["Level_3_15"] = ["Level_4_y","Level_4_z","Level_4_a1", "Level_4_b1"];
categories["Level_3_16"] = ["Level_4_c1","Level_4_d1","Level_4_e1", "Level_4_f1"];

var nLists = 4; // number of lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(L4, L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4);
}

function init() {
fillSelect('Level',document.forms[0]['List1'])
}

navigator.appName == "Microsoft Internet Explorer"
? attachEvent('onload', init, false)
: addEventListener('load', init, false);

</script>
</head>

<body>
<form action="">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List3' onchange="fillSelect(this.value,this.form['List4'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List4'
onchange="getValue(this.value, this.form['List3'].value, this.form['List2'].value, this.form['List1'].value)">
<option selected >Make a selection</option>
</select>
</form>

</body>
</html>

Fill in your category array descriptions as needed.

Good Luck!
:)

ezrian
01-23-2011, 07:34 AM
Thank's to all of you, my web page is finally functional. I used a total of 5 list in the code "List", "ListB", "ListC", "ListD" and "ListE"

Just for information here's the part of the code for "List" and "ListC" :
And here's a link to the page where the code is use :
http://www.ggirardetfils.com/form.htm

I hope this will help some else.



<html>
<head>
<script type="text/javascript">

var categories = [];
categories["startList"] = ["Battant","Coulissante","Guillotine simple","Auvent","Imposte"]

categories["Battant"] = ["PVC","Combo PVC","Combo Aluminium"];
categories["Coulissante"] = ["PVC","Bois","Combo PVC","Combo Aluminium"];
categories["Guillotine simple"] = ["PVC","Combo PVC","Combo Aluminium"];
categories["Auvent"] = ["PVC","Combo PVC","Combo Aluminium"];
categories["Imposte"] = ["PVC","Combo PVC","Combo Aluminium"];

categories["PVC"] = ["Low e argon","Clair"];
categories["Combo Aluminium"] = ["Low e argon","Clair"];
categories["Combo PVC"] = ["Low e argon","Clair"];
categories["Bois"] = ["Low e argon","Clair"];

categories["Low e argon"] = ["Complet","Contour","Haut"]
categories["Clair"] = ["Complet","Contour","Haut"];



var nLists = 4; // number of lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms[0]['List'+i].length = 1;
document.forms[0]['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(L4, L3, L2, L1) {
}

function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>

<script type="text/javascript">

var categoriesC = [];
categoriesC["startListC"] = ["5 pieds","6 pieds","7 pieds","8 pieds","9 pieds"]

categoriesC["5 pieds"] = ["Low e argon","Clair"];
categoriesC["6 pieds"] = ["Low e argon","Clair"];
categoriesC["7 pieds"] = ["Low e argon","Clair"];
categoriesC["8 pieds"] = ["Low e argon","Clair"];
categoriesC["9 pieds"] = ["Low e argon","Clair"];

categoriesC["Low e argon"] = ["Complet","Contour","Haut"]
categoriesC["Clair"] = ["Complet","Contour","Haut"];

var nListsC = 3; // number of select lists in the set

function fillSelectC(currCatC, currListC){
var stepC = Number(currListC.name.replace(/\D/g,"")); // capture the suffix digit
for (iC = stepC; iC<nListsC+1; iC++) {
document.forms[0]['ListC'+iC].length = 1;
document.forms[0]['ListC'+iC].selectedIndex = 0;
}
var nCatC = categoriesC[currCatC];
for (each in nCatC) {
var nOptionC = document.createElement('option');
var nDataC = document.createTextNode(nCatC[each]);
nOptionC.setAttribute('value',nCatC[each]);
nOptionC.appendChild(nDataC);
currListC.appendChild(nOptionC);
}
}

function getValueC(L3, L2, L1) {
}

function initC() {
fillSelectC('startListC',document.forms['tripleplay']['ListC1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', initC, false) : addEventListener('load', initC, false);

</script>
</head>

<body>
<form name="tripleplay" method="post" action="sendmail.php">
<p>
<select name='List1' onChange="fillSelect(this.value,this.form['List2'])">
<option selected>Produit</option>
</select>
&nbsp;
<select name='List2' onChange="fillSelect(this.value,this.form['List3'])">
<option>Mat&eacute;riel</option>
</select>
&nbsp;
<select name='List3' onChange="fillSelect(this.value,this.form['List4'])">
<option selected>Teinte</option>
</select>
&nbsp;
<select name='List4'
onchange="getValue(this.value, this.form['List3'].value, this.form['List2'].value, this.form['List1'].value)">
<option selected >Carrelage</option>
</select>
</p>
<p>
<select name='ListC1' onChange="fillSelectC(this.value,this.form['ListC2'])">
<option selected>Hauteur</option>
</select>
&nbsp;
<select name='ListC2' onChange="fillSelectC(this.value,this.form['ListC3'])">
<option selected>Teinte</option>
</select>
&nbsp;
<select name='ListC3' onChange="getValueC(this.value, this.form['ListC2'].value,
this.form['ListC1'].value)">
<option>Carrelage</option>
</select>
</p>
</form>
</body>
<html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum