Page 1 of 1

Updating a drop-down list after selection from another

Posted: Fri Mar 26, 2004 8:51 am
by mjseaden
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

Posted: Fri Mar 26, 2004 9:02 am
by patrikG
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.

Posted: Fri Mar 26, 2004 9:16 am
by mjseaden
Thanks very much - it will be interesting trying to combine this with my PHP code :)

Posted: Fri Mar 26, 2004 11:38 am
by mjseaden
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

Posted: Fri Mar 26, 2004 12:45 pm
by Chambrln
Here is an example of the one I am using on one of my sites.

Code: Select all

<script language=JavaScript>
function UpdateDept() &#123;
  var schoolSelect = document.forms.tacplan.school;
  var deptSelect = document.forms.tacplan.dept;

  deptSelect.options.length = 0; // Clear the popup

  if (schoolSelect.options&#1111;schoolSelect.selectedIndex].value == "2") &#123;
    deptSelect.options&#1111;0] = new Option("&#1111;Select One]", 0);
    deptSelect.options&#1111;1] = new Option("Biology", 6);
    deptSelect.options&#1111;2] = new Option("Chemistry", 10);
    deptSelect.options&#1111;3] = new Option("Communication Studies", 11);
    deptSelect.options&#1111;4] = new Option("English", 17);
    deptSelect.options&#1111;5] = new Option("Foreign Languages", 50);
    deptSelect.options&#1111;6] = new Option("History", 22);
    deptSelect.options&#1111;7] = new Option("Mathematics", 27);
    deptSelect.options&#1111;8] = new Option("Performing and Fine Arts", 31);
    deptSelect.options&#1111;9] = new Option("Philosophy", 33);
    deptSelect.options&#1111;10] = new Option("Physics", 49);
    deptSelect.options&#1111;11] = new Option("Political Science", 51);
    deptSelect.options&#1111;12] = new Option("Social and Behavioral Sciences", 41);
    deptSelect.options&#1111;13] = new Option("Theology", 45);
  &#125; else if (schoolSelect.options&#1111;schoolSelect.selectedIndex].value == "6") &#123;
    deptSelect.options&#1111;0] = new Option("&#1111;Select One]", 0);
    deptSelect.options&#1111;1] = new Option("Admissions", 1);
    deptSelect.options&#1111;2] = new Option("Alumni", 2);
    deptSelect.options&#1111;3] = new Option("Archives", 3);
    deptSelect.options&#1111;4] = new Option("Athletics", 5);
    deptSelect.options&#1111;5] = new Option("Campus ministry", 8);
    deptSelect.options&#1111;6] = new Option("Career Services", 9);
    deptSelect.options&#1111;7] = new Option("Center for Entrepreneurship", 18);
    deptSelect.options&#1111;8] = new Option("Controller", 13);
    deptSelect.options&#1111;9] = new Option("CTS", 12);
    deptSelect.options&#1111;10] = new Option("Development", 14);
    deptSelect.options&#1111;11] = new Option("Financial Aid", 19);
    deptSelect.options&#1111;12] = new Option("Financial VP", 20);
    deptSelect.options&#1111;13] = new Option("Graduate School", 21);
    deptSelect.options&#1111;14] = new Option("Health Center", 47);
    deptSelect.options&#1111;15] = new Option("Institutional Research", 23);
    deptSelect.options&#1111;16] = new Option("International Student Services", 24);
    deptSelect.options&#1111;17] = new Option("Library", 25);
    deptSelect.options&#1111;18] = new Option("Mail Center", 26);
    deptSelect.options&#1111;19] = new Option("Museum", 28);
    deptSelect.options&#1111;20] = new Option("Payroll", 30);
    deptSelect.options&#1111;21] = new Option("Personnel and Admin services", 32);
    deptSelect.options&#1111;22] = new Option("Physical Plant", 34);
    deptSelect.options&#1111;23] = new Option("Printing Services", 35);
    deptSelect.options&#1111;24] = new Option("Public Relations", 36);
    deptSelect.options&#1111;25] = new Option("Public Safety", 37);
    deptSelect.options&#1111;26] = new Option("Registrar", 38);
    deptSelect.options&#1111;27] = new Option("Residence Life", 39);
    deptSelect.options&#1111;28] = new Option("Shepard Freshman Resource Center", 40);
    deptSelect.options&#1111;29] = new Option("Student Accounts and Loans", 42);
    deptSelect.options&#1111;30] = new Option("Student Activities", 43);
    deptSelect.options&#1111;31] = new Option("Student Services VP", 44);
    deptSelect.options&#1111;32] = new Option("University Events", 46);
    deptSelect.options&#1111;33] = new Option("Volunteer Services", 48);
  &#125; else if (schoolSelect.options&#1111;schoolSelect.selectedIndex].value == "1") &#123;
    deptSelect.options&#1111;0] = new Option("&#1111;Select One]", 0);
    deptSelect.options&#1111;1] = new Option("Graduate", 52);
    deptSelect.options&#1111;2] = new Option("Undergraduate", 53);
  &#125; else if (schoolSelect.options&#1111;schoolSelect.selectedIndex].value == "3") &#123;
    deptSelect.options&#1111;0] = new Option("&#1111;Select One]", 0);
    deptSelect.options&#1111;1] = new Option("Elementary Education", 54);
    deptSelect.options&#1111;2] = new Option("M. ED. Program", 57);
    deptSelect.options&#1111;3] = new Option("MA Program", 58);
    deptSelect.options&#1111;4] = new Option("MAT Program", 56);
    deptSelect.options&#1111;5] = new Option("PACE", 60);
    deptSelect.options&#1111;6] = new Option("Post Master Program", 59);
    deptSelect.options&#1111;7] = new Option("Secondary Education", 55);
  &#125; else if (schoolSelect.options&#1111;schoolSelect.selectedIndex].value == "4") &#123;
    deptSelect.options&#1111;1] = new Option("N/A",0);
  &#125; else if (schoolSelect.options&#1111;schoolSelect.selectedIndex].value == "5") &#123;
    deptSelect.options&#1111;1] = new Option("N/A",0);
  &#125;
&#125;
</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">&#1111;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.