...

View Full Version : Help needed for duplicating sets of Triple Drop Down menu.



creativ3
07-11-2011, 04:38 AM
Dear all,

Below are my current script. I need another few more sets of the triple drop down menu same as the below script... (Scenario: creating like a online shopping order form, where customers can have multiple orders.) Please guide me how to do so.. Thank you in advance.



<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 categories = [];
categories["startList"] = ["Wearing Apparel","Books"]
categories["Wearing Apparel"] = ["Men","Women","Children"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];
categories["Men"] = ["Shirts","Ties","Belts","Hats"];
categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];
categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];

var nLists = 3; // number of select 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['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['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['tripleplay']['List1'])
}

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

</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<form name="tripleplay" 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>

creativ3
07-11-2011, 02:48 PM
anyone here can help me out with this? need it urgently.

jmrker
07-11-2011, 04:08 PM
Lack of planning on your part does not constitute an emergency on our part. :eek:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Multi-Dropdown Displays</title>
<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

Multi-display:
Modified by: JMRKER
*/

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

var nLists = 3; // number of select 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['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['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['tripleplay']['List11'])
fillSelect('startList',document.forms['tripleplay']['List21'])
}

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

</script>
<style type="text/css">
#ddDisplay1 { width:200px; float:left; }
</style>

</head>

<body>
<form name="tripleplay" action="" onsubmit="return false">

<div id="ddDisplay1">
<select name='List11'
onchange="fillSelect(this.value,this.form['List12'])">
<option selected>Make a selection</option>
</select><br>
<select name='List12'
onchange="fillSelect(this.value,this.form['List13'])">
<option selected>Make a selection</option>
</select><br>
<select name='List13'
onchange="getValue(this.value, this.form['List12'].value, this.form['List11'].value)">
<option selected >Make a selection</option>
</select>
</div>

<div id="ddDisplay2">
<select name='List21'
onchange="fillSelect(this.value,this.form['List22'])">
<option selected>Make a selection</option>
</select><br>
<select name='List22'
onchange="fillSelect(this.value,this.form['List23'])">
<option selected>Make a selection</option>
</select><br>
<select name='List23'
onchange="getValue(this.value, this.form['List22'].value,
this.form['List21'].value)">
<option selected >Make a selection</option>
</select>
</div>

<br style="clear:both">
</form>
</body>
</html>

creativ3
07-11-2011, 05:20 PM
Thanks a million...

Sorry if I have not done any editing on that script. As I am very new to html & javascript... My current knowledge is still at the level of trial error... Editing of text by luck...


:)

creativ3
07-11-2011, 06:49 PM
Dear jmrker,

I am facing a problem. Attached picture is what I am facing. Hope you are able to help me on that.

Thank you jmrker.

jmrker
07-11-2011, 08:33 PM
Dear jmrker,

I am facing a problem. Attached picture is what I am facing. Hope you are able to help me on that.

Thank you jmrker.

A picture may be worth a thousand words,
but a picture of the problem does not help when the code is missing.
I can change the code, I can not change the picture.
:(

creativ3
07-12-2011, 05:16 AM
Sorry forget to attach the script as well...

var categories = [];
categories["startList"] = ["Play with words","Print a Photo","Psychedelic","Our Brand","Its Play Time","Fun Rugby","Clubbin","Pop Art","Huge Accessories","Love Is In The Air","All bout Love","Dragonboat","Outdoor Fun","Sunny Boys n Girls","Happy","Pride","Junk Foods","Donuts","The Voodoo","Board Games","Write On It","Children"]
categories["Play with words"] = ["A1","A2"];
categories["A1"] = ["Baby TShirts","Kids TShirts"];
categories["A2"] = ["Baby TShirts","Teens TShirts"];

var nLists = 3; // number of select 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['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['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['tripleplay']['List11'])
fillSelect('startList',document.forms['tripleplay']['List21'])
}

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

</script>

</head>

<body>
<form name="tripleplay" action="" onSubmit="return false">

<select name='List11'
onchange="fillSelect(this.value,this.form['List12'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List12'
onChange="fillSelect(this.value,this.form['List13'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List13'
onChange="getValue(this.value, this.form['List12'].value, this.form['List11'].value)">
<option selected >Make a selection</option>
</select>
<br>
<br>
<select name='List21'
onchange="fillSelect(this.value,this.form['List22'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List22'
onChange="fillSelect(this.value,this.form['List23'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List23'
onChange="getValue(this.value, this.form['List22'].value,
this.form['List21'].value)">
<option selected >Make a selection</option>
</select>
<br>
<br>
</form>
</body>
</html>

jmrker
07-12-2011, 05:54 AM
You don't have any of the arrays defined except: "Play with words"



categories["startList"]
= ["Play with words","Print a Photo","Psychedelic","Our Brand","Its Play Time","Fun Rugby","Clubbin","Pop Art",
"Huge Accessories","Love Is In The Air","All bout Love","Dragonboat","Outdoor Fun","Sunny Boys n Girls",
"Happy","Pride","Junk Foods","Donuts","The Voodoo","Board Games","Write On It","Children"];
categories["Play with words"] = ["A1","A2"];
categories["A1"] = ["Baby TShirts","Kids TShirts"];
categories["A2"] = ["Baby TShirts","Teens TShirts"];

creativ3
07-12-2011, 06:19 AM
Yes I have.. But trying out on the 1st one... If success will continue the rest of them.... As different series will have different products.

jmrker
07-12-2011, 03:39 PM
Yes I have.. But trying out on the 1st one... If success will continue the rest of them.... As different series will have different products.

So...what is the problem? :confused:
The first one works fine for me in FF.

creativ3
07-12-2011, 03:51 PM
There is an error when the wrong selection was made. E.G If I choose Play with Words at column A then selecting A1 accidentally when it was A2 I wanted, then column C will show both A1 and A2's selection.

jmrker
07-12-2011, 05:16 PM
There is an error when the wrong selection was made. E.G If I choose Play with Words at column A then selecting A1 accidentally when it was A2 I wanted, then column C will show both A1 and A2's selection.

I started fresh from the original codes (see references) and substituted your 'categories' array.
Then I don't see the problem. Check your script against this (line by line) to find the difference.


<html>
<head>
<title> 3-level Drop Down</title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=202456
// and: http://www.codingforums.com/showthread.php?t=169465

/*
var categories = [];
categories["startList"] = ["Apparel","Books"]; // Level 1
categories["Apparel"] = ["Men","Women"]; // Level 2
categories["Men"] = ["Shirts","Ties","Belts"]; // Level 3
categories["Women"] = ["Blouses","Skirts","Scarves"];

categories["Books"] = ["Biography","Fiction","Nonfiction"]; // Level 2
categories["Biography"] = ["Contemporay","Historical","Other"]; // Level 3
categories["Fiction"] = ["Science","Romance"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];
*/

var categories = [];
categories["startList"] = [
"Play with words","Print a Photo","Psychedelic","Our Brand","Its Play Time",
"Fun Rugby","Clubbin","Pop Art","Huge Accessories","Love Is In The Air",
"All bout Love","Dragonboat","Outdoor Fun","Sunny Boys n Girls","Happy",
"Pride","Junk Foods","Donuts","The Voodoo","Board Games","Write On It","Children"];

categories["Play with words"] = ["A1","A2"];
categories["A1"] = ["Baby TShirts","Kids TShirts"];
categories["A2"] = ["Baby TShirts","Teens TShirts"];

categories['Print a Photo'] = ['B1','B2'];
categories['B1'] = ['3x5','4x6'];
categories['B2'] = ['5x7','8x10'];

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 getValues() {
var str = '';
str += document.getElementById('List1').value+'\n';
str += document.getElementById('List2').value+'\n';
str += document.getElementById('List3').value+'\n';
alert(str);
}

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' id="List1" onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List2' id="List2" onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>

</select>
&nbsp;
<select name='List3' id="List3" onchange="getValues()">
<option selected >Make a selection</option>
</select>
</form>

</body>
</html>

jmrker
07-12-2011, 07:36 PM
I see the problem you are having now.
It is in the calls and execution of the 'fillSelect' function.

This should eliminate your problem.


<html>
<head>
<title> 3-level Drop Down</title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=202456
// and: http://www.codingforums.com/showthread.php?t=169465

var categories = [];
categories["startList"] = [
"Play with words","Print a Photo","Psychedelic","Our Brand","Its Play Time",
"Fun Rugby","Clubbin","Pop Art","Huge Accessories","Love Is In The Air",
"All bout Love","Dragonboat","Outdoor Fun","Sunny Boys n Girls","Happy",
"Pride","Junk Foods","Donuts","The Voodoo","Board Games","Write On It","Children"];

categories["Play with words"] = ["A1","A2"];
categories["A1"] = ["Baby TShirts","Kids TShirts"];
categories["A2"] = ["Baby TShirts","Teens TShirts"];

categories['Print a Photo'] = ['B1','B2'];
categories['B1'] = ['3x5','4x6'];
categories['B2'] = ['5x7','8x10'];

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

function fillSelect(currCat,currList) {
oSel1 = document.getElementById(currList); // alert(oSel1.id);
oSel1.options.length = 0;
oSel1.options[oSel1.options.length] = new Option('Select an option','',false,false);
for (i=0; i < categories[currCat].length; i++) {
oSel1.options[oSel1.options.length]
= new Option(categories[currCat][i],categories[currCat][i], false,false);
}
}

function getValue(L3, L2, L1) {
var str = "Your selection was:";
str += "\n"+document.getElementById(L3).value;
str += "\n"+document.getElementById(L2).value;
str += "\n"+document.getElementById(L1).value;
alert(str);
}

function init() {
fillSelect('startList','List11');
fillSelect('startList','List21');
}

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

</script>
<style type="text/css">
#ddDisplay1 { width:200px; float:left; }
</style>
</head>

<body>
<form action="" onsubmit="return false">
<div id="ddDisplay1">
<select name='List11' id="List11"
onchange="fillSelect(this.value,'List12')">
<option selected>Make a selection</option>
</select><br>
<select name='List12' id="List12"
onchange="fillSelect(this.value,'List13')">
<option selected>Make a selection</option>
</select><br>
<select name='List13' id="List13" onchange="getValue('List13', 'List12', 'List11')">
<option selected >Make a selection</option>
</select>
</div>

<div id="ddDisplay2">
<select name='List21' id="List21"
onchange="fillSelect(this.value,'List22')">
<option selected>Make a selection</option>
</select><br>
<select name='List22' id="List22"
onchange="fillSelect(this.value,'List23')">
<option selected>Make a selection</option>
</select><br>
<select name='List23' id="List23" onchange="getValue('List23', 'List22', 'List21')">
<option selected >Make a selection</option>
</select>
</div>

<br style="clear:both">
</form>

</body>
</html>

creativ3
07-14-2011, 07:47 PM
Jmrker, Big thank you for your help. Greatly appreciated. By the way are you able to teach how am I suppose to collate all informations and submit and send to my email.

jmrker
07-14-2011, 08:09 PM
Jmrker, Big thank you for your help. Greatly appreciated. By the way are you able to teach how am I suppose to collate all informations and submit and send to my email.

You're most welcome.
Happy to help.

I don't know what or where the question is for your email problem. :confused:

You might be able to use the "mailto" attribute of the anchor tag <a href=mailto:.... >
but this is not recommended because your server might ignore the request.
You can read more about this and the associated problems with a google search.

If this is a commercial site, you would be better off contacting your service provider
to see how to collect the information submitted via the <form> tag.

Good Luck!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum