Here is an example of the one I am using on one of my sites.
Code: Select all
<script language=JavaScript>
function UpdateDept() {
var schoolSelect = document.forms.tacplan.school;
var deptSelect = document.forms.tacplan.dept;
deptSelect.options.length = 0; // Clear the popup
if (schoolSelect.optionsїschoolSelect.selectedIndex].value == "2") {
deptSelect.optionsї0] = new Option("їSelect One]", 0);
deptSelect.optionsї1] = new Option("Biology", 6);
deptSelect.optionsї2] = new Option("Chemistry", 10);
deptSelect.optionsї3] = new Option("Communication Studies", 11);
deptSelect.optionsї4] = new Option("English", 17);
deptSelect.optionsї5] = new Option("Foreign Languages", 50);
deptSelect.optionsї6] = new Option("History", 22);
deptSelect.optionsї7] = new Option("Mathematics", 27);
deptSelect.optionsї8] = new Option("Performing and Fine Arts", 31);
deptSelect.optionsї9] = new Option("Philosophy", 33);
deptSelect.optionsї10] = new Option("Physics", 49);
deptSelect.optionsї11] = new Option("Political Science", 51);
deptSelect.optionsї12] = new Option("Social and Behavioral Sciences", 41);
deptSelect.optionsї13] = new Option("Theology", 45);
} else if (schoolSelect.optionsїschoolSelect.selectedIndex].value == "6") {
deptSelect.optionsї0] = new Option("їSelect One]", 0);
deptSelect.optionsї1] = new Option("Admissions", 1);
deptSelect.optionsї2] = new Option("Alumni", 2);
deptSelect.optionsї3] = new Option("Archives", 3);
deptSelect.optionsї4] = new Option("Athletics", 5);
deptSelect.optionsї5] = new Option("Campus ministry", 8);
deptSelect.optionsї6] = new Option("Career Services", 9);
deptSelect.optionsї7] = new Option("Center for Entrepreneurship", 18);
deptSelect.optionsї8] = new Option("Controller", 13);
deptSelect.optionsї9] = new Option("CTS", 12);
deptSelect.optionsї10] = new Option("Development", 14);
deptSelect.optionsї11] = new Option("Financial Aid", 19);
deptSelect.optionsї12] = new Option("Financial VP", 20);
deptSelect.optionsї13] = new Option("Graduate School", 21);
deptSelect.optionsї14] = new Option("Health Center", 47);
deptSelect.optionsї15] = new Option("Institutional Research", 23);
deptSelect.optionsї16] = new Option("International Student Services", 24);
deptSelect.optionsї17] = new Option("Library", 25);
deptSelect.optionsї18] = new Option("Mail Center", 26);
deptSelect.optionsї19] = new Option("Museum", 28);
deptSelect.optionsї20] = new Option("Payroll", 30);
deptSelect.optionsї21] = new Option("Personnel and Admin services", 32);
deptSelect.optionsї22] = new Option("Physical Plant", 34);
deptSelect.optionsї23] = new Option("Printing Services", 35);
deptSelect.optionsї24] = new Option("Public Relations", 36);
deptSelect.optionsї25] = new Option("Public Safety", 37);
deptSelect.optionsї26] = new Option("Registrar", 38);
deptSelect.optionsї27] = new Option("Residence Life", 39);
deptSelect.optionsї28] = new Option("Shepard Freshman Resource Center", 40);
deptSelect.optionsї29] = new Option("Student Accounts and Loans", 42);
deptSelect.optionsї30] = new Option("Student Activities", 43);
deptSelect.optionsї31] = new Option("Student Services VP", 44);
deptSelect.optionsї32] = new Option("University Events", 46);
deptSelect.optionsї33] = new Option("Volunteer Services", 48);
} else if (schoolSelect.optionsїschoolSelect.selectedIndex].value == "1") {
deptSelect.optionsї0] = new Option("їSelect One]", 0);
deptSelect.optionsї1] = new Option("Graduate", 52);
deptSelect.optionsї2] = new Option("Undergraduate", 53);
} else if (schoolSelect.optionsїschoolSelect.selectedIndex].value == "3") {
deptSelect.optionsї0] = new Option("їSelect One]", 0);
deptSelect.optionsї1] = new Option("Elementary Education", 54);
deptSelect.optionsї2] = new Option("M. ED. Program", 57);
deptSelect.optionsї3] = new Option("MA Program", 58);
deptSelect.optionsї4] = new Option("MAT Program", 56);
deptSelect.optionsї5] = new Option("PACE", 60);
deptSelect.optionsї6] = new Option("Post Master Program", 59);
deptSelect.optionsї7] = new Option("Secondary Education", 55);
} else if (schoolSelect.optionsїschoolSelect.selectedIndex].value == "4") {
deptSelect.optionsї1] = new Option("N/A",0);
} else if (schoolSelect.optionsїschoolSelect.selectedIndex].value == "5") {
deptSelect.optionsї1] = new Option("N/A",0);
}
}
</script>
Then for my form I have this
Code: Select all
<form action="findgoal.php" method="post" name="tacplan" id="tacplan">
<select name="school" id="school" onchange="UpdateDept()">
<option value="6" selected>Department Only</option>
<option value="2">College of Arts and Sciences</option>
<option value="1">Pamplin School of Business</option>
<option value="3">School of Education</option>
<option value="4">School of Engineering</option>
<option value="5">School of Nursing</option>
</select>
<select name="dept" id="dept">
<option value="0">їSelect One]</option>
<option value="1">Admissions</option>
<option value="2">Alumni</option>
<option value="3">Archives</option>
<option value="5">Athletics</option>
<option value="8">Campus ministry</option>
<option value="9">Career Services</option>
<option value="18">Center for Entrepreneurship</option>
<option value="13">Controller</option>
<option value="12">CTS</option>
<option value="14">Development</option>
<option value="19">Financial Aid</option>
<option value="20">Financial VP</option>
<option value="21">Graduate School</option>
<option value="47">Health Center</option>
<option value="23">Institutional Research</option>
<option value="24">International Student Services</option>
<option value="25">Library</option>
<option value="26">Mail Center</option>
<option value="28">Museum</option>
<option value="30">Payroll</option>
<option value="32">Personnel and Admin services</option>
<option value="34">Physical Plant</option>
<option value="35">Printing Services</option>
<option value="36">Public Relations</option>
<option value="37">Public Safety</option>
<option value="38">Registrar</option>
<option value="39">Residence Life</option>
<option value="40">Shepard Freshman Resource Center</option>
<option value="42">Student Accounts and Loans</option>
<option value="43">Student Activities</option>
<option value="44">Student Services VP</option>
<option value="46">University Events</option>
<option value="48">Volunteer Services</option>
</select>
</form>
You have to populate atleast the first drop down with information and you can do the second one with the default info from the first selection in the first dropdown if you want.
I actually generate this whole thing with php and a couple SQL querys so it is automated.