Help needed for duplicating sets of Triple Drop Down menu.
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.
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);
}
}
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...
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.
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);
}
}
You don't have any of the arrays defined except: "Play with words"
Code:
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"];
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.
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.
Code:
<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>
<select name='List2' id="List2" onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>
<select name='List3' id="List3" onchange="getValues()">
<option selected >Make a selection</option>
</select>
</form>
</body>
</html>
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, 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.
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.
Before you post, read our: 
