...

View Full Version : Triple Drop down list help



dareichmann
07-25-2011, 07:13 PM
Hello All,

I am trying to create a three drop down lists for my job. The three drop downs would be:

Degree Type (certificate, associate's, bachelor's, etc)
Category (Arts & Humanities, Automotive, Computers & IT etc.)
Program (Desktop Publishing, Automotive Technician Training, Network Systems, etc.)

The Category list needs to be dependent on the degree type and the Program list needs to be dependent on the Category list. I need to have values that will submit to my form but ONLY for the Program List.

For example:

<option value="CECS">Cisco</option>
<option value="CEIT">Information Technology (General)</option>
<option value="CEMS">Microsoft</option>
<option value="CENSYS">Network Systems</option>

Please note that I must use these program codes as values and I cannot use the option name as the value.

This does not have to look good, it just needs to work as it is for internal use only within my company. This form will never be used by random web surfers.

If someone can point me to a tutorial for a good triple drop down that will pass ONLY the values of the third list, that would be great! Thanks!

Philip M
07-25-2011, 07:32 PM
Have a look at:-

http://www.javascriptkit.com/script/script2/triplecombo.shtml


It is your responsibility to die() if necessary….. - PHP Manual

dareichmann
07-25-2011, 08:24 PM
How do I assign values to each of the options using that method?

Philip M
07-25-2011, 08:30 PM
How do I assign values to each of the options using that method?

I don't understand you. Surely it is obvious.



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

dareichmann
07-25-2011, 09:30 PM
I understand that Nonfiction is the category and "How-To","Travel","Cookbooks", "Old Churches" are the values, but how would i set my form to pass different values to my database? What if a user selects "How-To" in the drop down but I want it to post to my database as O1 or some other means of organization in my database?

In other words, I want my users to see "How-To","Travel","Cookbooks", "Old Churches" as their options, but i want my form to post the data to my databases it as "O1","O2","O3"

I hope that makes sense.

Philip M
07-25-2011, 09:56 PM
I understand that Nonfiction is the category and "How-To","Travel","Cookbooks", "Old Churches" are the values, but how would i set my form to pass different values to my database? What if a user selects "How-To" in the drop down but I want it to post to my database as O1 or some other means of organization in my database?

In other words, I want my users to see "How-To","Travel","Cookbooks", "Old Churches" as their options, but i want my form to post the data to my databases it as "O1","O2","O3"

I hope that makes sense.

It makes sense but the script does not lend itself to that. :(

dareichmann
07-25-2011, 10:06 PM
Is there a method that you would suggest that would allow me to accomplish what i am looking for?

jmrker
07-26-2011, 02:22 AM
Note modifications to 'PhillipM's original code. ;)

Change the parts after the colons ':', to match what you want to send to your dBase. :thumbsup:



<!DOCTYPE HTML>
<html>
<head>
<title> Triple Combo </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

Modified by: jmrker
*/

var categories = [];
categories["startList"] = ["Wearing Apparel:A","Books:B"];

categories["Wearing Apparel"] = ["Men:A1","Women:A2","Children:A3"];
categories["Men"] = ["Shirts:A11","Ties:A12","Belts:A13","Hats:A14"];
categories["Women"] = ["Blouses:A21","Skirts:A22","Scarves:A23", "Hats:A24"];
categories["Children"] = ["Shorts:A31", "Socks:A32", "Coats:A33", "Nightwear:A34"];

categories["Books"] = ["Biography:B1","Fiction:B2","Nonfiction:B3"];
categories["Biography"] = ["Contemporay:B11","Historical:B12","Other:B13"];
categories["Fiction"] = ["Science Fiction:B21","RomanceB22", "Thrillers:B23", "Crime:B24"];
categories["Nonfiction"] = ["How-To:O1","Travel:O2","Cookbooks:O3", "Old Churches:O4"];

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 tmp = currCat.split(':');
var nCat = categories[tmp[0]];
for (each in nCat) {
tmp = nCat[each].split(':');
var nOption = document.createElement('option');
var nData = document.createTextNode(tmp[0]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}

function getValue(L3, L2, L1) {
var l3 = L3.split(':');
var l2 = L2.split(':');
var l1 = L1.split(':');
// alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
alert("Your selection was:- \n" + l1[1] + "\n" + l2[1] + "\n" + l3[1]);
}

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

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

</script>
</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>

Good Luck!
:)

Philip M
07-26-2011, 01:21 PM
Thanks jmrker, that is a neat way of doing it. :thumbsup:

jmrker
07-26-2011, 03:55 PM
Thanks jmrker, that is a neat way of doing it. :thumbsup:

You're most welcome. :D

Note also that the ':' separators could just as easily be '|' separators
if the contents to send to the dBase contain colons as in a URL link.

Your code seems pretty flexible and could be adapted to N different levels
with just a bit of caution for possible duplicate array names.

Good Luck!
:)

Philip M
07-26-2011, 05:45 PM
You're most welcome. :D

Note also that the ':' separators could just as easily be '|' separators
if the contents to send to the dBase contain colons as in a URL link.

Your code seems pretty flexible and could be adapted to N different levels
with just a bit of caution for possible duplicate array names.

Good Luck!
:)

FWIIW, I normally use the tilde ~ as a delimiter.

dareichmann
07-26-2011, 06:57 PM
Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum