Dear All
I have two drop-down list objects - one whose contents are a list of countries, the other a list of major cities within those countries.
I want the list of major cities to update according to the chosen country in the first drop-down list object.
Can anyone explain how to do this? Do I refresh the page? If so how? Or is there a realtime way of doing it?
Many thanks
Mark
Updating a drop-down list after selection from another
Moderator: General Moderators
You might find these links useful:
http://www.mattkruse.com/javascript/dynamicoptionlist/
and
http://www.mattkruse.com/javascript/selectbox/
Nice Javascript solutions to your problem.
http://www.mattkruse.com/javascript/dynamicoptionlist/
and
http://www.mattkruse.com/javascript/selectbox/
Nice Javascript solutions to your problem.
If you read the source for the dynamic option list, just before the BODY object definition it explains that you should pass a reference to your FORM object in which the dynamic option lists are encapsulated.
I don't know what this means, but I have a feeling that it's important because my implementation doesn't seem to be working. Can anyone tell me what it means by 'pass a reference' to my FORM object? It's on the sourcecode page.
Would be most appreciated.
Thank you
Mark
I don't know what this means, but I have a feeling that it's important because my implementation doesn't seem to be working. Can anyone tell me what it means by 'pass a reference' to my FORM object? It's on the sourcecode page.
Would be most appreciated.
Thank you
Mark
Here is an example of the one I am using on one of my sites.
Then for my form I have this
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.
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>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>I actually generate this whole thing with php and a couple SQL querys so it is automated.