SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Oct 2002
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Loading Three Dropdown Boxes

    I have a problem that involves three dropdown boxes. There are three classifications...Colleges, Departments, and Majors. The first box deals with a certain college and once the specific college is chosen the next two dropdown boxes will automatically be filled in. In other words...in the Colleges box i would have choices Business Admin, Education, Engineering, Health Science, Lib Arts, etc... and if i chose Busness Admin the choices for the Department box would be filled in (i.e. Accounting Dept, Economics Dept, IDS Dept, and so on) and when the department is chosen, the majors would be filled in (i.e. Accounting Degree, General Business, Economics Degree, Public Admin Degree, etc...) I managed to get some of it down but my last dropdown box (the Majors/Degrees) does not work. Here is what I have:



    PHP:--------------------------------------------------------------------------------
    <HTML>
    <HEAD>
    <TITLE>Drop Downs</title>
    <SCRIPT language='JavaScript'>
    <!-- //

    // create js arrays to hold the data for selDept

    var aryDeptData = new Array();

    aryDeptData[0] = new Array();
    aryDeptData[0][0] = new Option('Select a Department','0');


    aryDeptData[1] = new Array();
    aryDeptData[1][0] = new Option('Accounting','101');
    aryDeptData[1][1] = new Option('Economics & Finance','102');
    aryDeptData[1][2] = new Option('Management','103');
    aryDeptData[1][3] = new Option('Information & Decisions','104');
    //aryDeptData[1][4] = new option('Marketing','105');

    // create js arrays to hold the data for selMajor

    var aryMajorData = new Array();

    aryMajorData[0] = new Array();
    aryMajorData[0][0] = new Option('Select a Major','0');


    aryMajorData[1] = new Array();
    aryMajorData[1][0] = new Option('Accounting','101');
    aryMajorData[1][1] = new Option('Business Administration','102');
    aryMajorData[1][2] = new Option('Economics','103');
    aryMajorData[1][3] = new Option('Business Admin/Public Admin','104');
    aryMajorData[1][4] = new option('Business Admin/Nursing Admin','105');
    aryMajorData[1][5] = new Option('Acct Combined BBA/MACC','106');
    aryMajorData[1][6] = new Option('Information Technology','107');

    //*********** This is the College Reload ******************************************************

    function reloadColleges(curCollegeIndex) // pass in the current College index
    {
    if ( curCollegeIndex < 0 ) return; // no state selected, so do nothing

    var aryDeptOpts = document.myform.selDept.options; // points to selDept options array

    aryDeptOpts.length=0; // first, clear the current Dept options ...

    // then re-load the Dept options with values for the current College
    for ( var i=0,n=aryDeptData[curCollegeIndex].length; i<n; i++ )
    {
    //// the line below no longer works in IE5 (it works in IE4 and NS4+).
    // aryDeptOpts[aryDeptOpts.length-1] = new

    Option(aryDeptData[curCollegeIndex][i].text,aryDeptData[curCollegeIndex][i].value);
    //// therefore, it now takes three lines to do the same thing:

    aryDeptOpts.length++; // add a new Option, then put data in it (below)
    aryDeptOpts[aryDeptOpts.length-1].text = aryDeptData[curCollegeIndex][i].text;
    aryDeptOpts[aryDeptOpts.length-1].value = aryDeptData[curCollegeIndex][i].value;
    }
    }



    //*********** This is the Department Reload *****************************************************

    function reloadDept(curMajorIndex) // pass in the current Dept index
    {
    if ( curMajorIndex < 0 ) return; // no Dept selected, so do nothing

    var aryMajorOpts = document.myform.selMajor.options; // points to selMajor options array

    aryMajorOpts.length=0; // first, clear the current Major options ...

    // then re-load the Major options with values for the current Dept
    for ( var i=0,n=aryMajorData[curMajorIndex].length; i<n; i++ )
    {
    //// the line below no longer works in IE5 (it works in IE4 and NS4+).
    // aryMajorOpts[aryMajorOpts.length-1] = new

    Option(aryMajorData[curMajorIndex][i].text,aryMajorData[curMajorIndex][i].value);
    //// therefore, it now takes three lines to do the same thing:

    aryMajorOpts.length++; // add a new Option, then put data in it (below)
    aryMajorOpts[aryMajorOpts.length-1].text = aryMajorData[curMajorIndex][i].text;
    aryMajorOpts[aryMajorOpts.length-1].value = aryMajorData[curMajorIndex][i].value;
    }
    }



    // -->
    </script>

    </head>

    <BODY onLoad='document.myform.selCollege.focus();'>

    <FORM name='myform' method='post' action='whatever.php' onSubmit='return(false);'>

    College: &nbsp;
    <SELECT name='selCollege' size='1' onChange='reloadColleges(this.selectedIndex);'>
    <OPTION value='0'>Select a College</option>
    <OPTION value='10'>Business Administration</option>
    <OPTION value='20'>Education</option>
    <OPTION value='30'>Engineering</option>
    <OPTION value='40'>Health Sciences</option>
    <OPTION value='50'>Liberal Arts</option>
    <OPTION value='60'>Science</option>

    </select><P>

    Department: &nbsp; &nbsp;
    <SELECT name='selDept' size='1' onChange='reloadDept(this.selectedIndex);'>
    <OPTION value=''>Select a Department</option>
    <OPTION></option>
    <OPTION></option>
    <OPTION></option>
    </select><P>

    Major: &nbsp; &nbsp;
    <SELECT name='selMajor' size='1' onChange='alert(this.options[this.selectedIndex].value)'>
    <OPTION value=''>Select a Major</option>
    <OPTION></option>
    <OPTION></option>
    <OPTION></option>
    </select><P>
    </form>
    </body>
    </html>
    --------------------------------------------------------------------------------


    Does anyone have any ideas? Please help.....

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why not create an array for each college name. so when the college drop down is changed you call a js that checks what you selected and loops through that colleges array and fills in the second drop down with its array's items

    ---put this in the body tag to see what i mean --

    <Script language="JavaScript">
    function list(){
    var college1 = new Array("College1 Option 1","College1 Option 2","College1 Option 2")
    var college2 = new Array("College2 Option 1","College2 Option 2","College2 Option 3")
    var college3 = new Array("College3 Option 1","College3 Option 2","College3 Option 3")
    var sel_idx = document.form.op1.selectedIndex
    var sel = document.form.op1.options[sel_idx].value
    if (sel=="college1"){
    for (i=0;i<college1.length;i++){
    document.form.op2.options[i].text = college1[i]
    }
    }
    if(sel=="college2"){
    for (i=0;i<college2.length;i++){
    document.form.op2.options[i].text = college2[i]
    }
    }
    if(sel=="college3"){
    for (i=0;i<college3.length;i++){
    document.form.op2.options[i].text = college3[i]
    }
    }
    }
    </Script>
    <Script language="JavaScript">
    function second_list(){
    var college1 = new Array("College1 Option 1,2","College1 Option 2,2","College1 Option 2,2")
    var college2 = new Array("College2 Option 1,2","College2 Option 2,2","College2 Option 3,2")
    var college3 = new Array("College3 Option 1,2","College3 Option 2,2","College3 Option 3,2")
    var sel_idx = document.form.op1.selectedIndex
    var sel = document.form.op2.options[sel_idx].value
    if (sel=="college1"){
    for (i=0;i<college1.length;i++){
    document.form.op3.options[i].text = college1[i]
    }
    }
    if(sel=="college2"){
    for (i=0;i<college2.length;i++){
    document.form.op3.options[i].text = college2[i]
    }
    }
    if(sel=="college3"){
    for (i=0;i<college3.length;i++){
    document.form.op3.options[i].text = college3[i]
    }
    }
    }
    </Script>
    <form name="form" method="post" action="">
    <select name="op1" size="1" onChange="list()">
    <option value="college1">College 1</option>
    <option value="college2">College 2</option>
    <option value="college3">College 3</option>
    </select>
    <select name="op2" size="1" onChange="second_list()">
    <option value="college1"></option>
    <option value="college2"></option>
    <option value="college3"></option>
    </select>
    <select name="op3" size="1">
    <option value="college1"></option>
    <option value="college2"></option>
    <option value="college3"></option>
    </select>
    </form>


    ---

    just change the names,values etc to suit you =)

    -Phil


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •