Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Thanked 0 Times in 0 Posts

    Need help with 2 level, drop down list

    Hi There.

    I've been reading this forum for quite sometime, but today is my first post, hope you guys can help.

    Here is how the code works: (its like a phone directory)

    -User first selects the dept.
    -Once selected, a second drop down populates with the names of each person in that department.
    -I want the contact info to show on the page once they select this last step.

    I need for when the user selects this second options for a link to open inside a iFrame inside of the same html page.

    I uploaded the file here for you to see: www.pioneer-energy.us/tf2/contact-us.html

    Here is the code for the HTML doc:

    <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillCategory();">
    <FORM name="drop_list" action="yourpage.php" method="POST" >
    <SELECT  NAME="Department" onChange="SelectSubCat();" >
    <Option value="">Select Department</option>
    <SELECT id="SubCat" NAME="SubCat">
    <Option value="">SubCat</option>

    Here is the .js file code

    function fillCategory(){ 
     // this function is used to fill the category list on load
    addOption(document.drop_list.Department, "Executive-Management", "Executive Management");
    addOption(document.drop_list.Department, "Marketing", "Marketing", "");
    addOption(document.drop_list.Department, "Annuities", "Annuities", "");
    addOption(document.drop_list.Department, "Underwriting/Case Management", "Underwriting/Case Management", "");
    addOption(document.drop_list.Department, "Human Resources", "Human Resources", "");
    addOption(document.drop_list.Department, "Commissions", "Commissions", "");
    addOption(document.drop_list.Department, "Policy Owner Services", "Policy Owner Services", "");
    addOption(document.drop_list.Department, "Information Technology", "Information Technology", "");
    addOption(document.drop_list.Department, "APS", "APS", "");
    function SelectSubCat(){
    // ON selection of category this function will work
    addOption(document.drop_list.SubCat, "", "SubCat", "");
    if(document.drop_list.Department.value == 'Executive-Management'){
    addOption(document.drop_list.SubCat,"MartyGreenberg", "Marty Greenberg - President");
    addOption(document.drop_list.SubCat,"LisaGreenberg ", "Lisa Greenberg - Vice President");
    addOption(document.drop_list.SubCat,"CraigBrown", "Craig Brown - CFO");
    addOption(document.drop_list.SubCat,"RitaBogan", "Rita Bogan - Executive Secretary & Case Management");
    addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager");
    if(document.drop_list.Department.value == 'Marketing'){
    addOption(document.drop_list.SubCat,"RonBielefelt", "Ron Bielefelt - Chief Marketing Officer");
    addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager");
    addOption(document.drop_list.SubCat,"MarkRBugli", "Mark R. Bugli - CLU, ChFC ");
    addOption(document.drop_list.SubCat,"HowardMandel", "Howard Mandel - Director of Business Development");
    addOption(document.drop_list.SubCat,"DeborahSanchez", "Deborah Sanchez - Brokerage Supervisor ");
    addOption(document.drop_list.SubCat,"SylviaMariscal", "Sylvia Mariscal - Life Settlements");
    addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager");
    addOption(document.drop_list.SubCat,"JosephTanner", "Joseph Tanner - Brokerage Manager Assistant", "");
    if(document.drop_list.Department.value == 'Annuities'){
    addOption(document.drop_list.SubCat,"SethMoses", "Seth Moses - Director of Annuities");
    addOption(document.drop_list.SubCat,"SteveAvila", "Steve Avila - Assistant to Seth Moses");
    if(document.drop_list.Department.value == 'Underwriting/Case Management'){
    addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager");
    addOption(document.drop_list.SubCat,"KimberlyFleming", "Kimberly Fleming - Case Manager ");
    addOption(document.drop_list.SubCat,"LarissaBurton", "Larissa Burton - Case Manager Assistant to Kimberly Fleming");
    addOption(document.drop_list.SubCat,"MariaAntebi", "Maria Antebi - Case Manager");
    addOption(document.drop_list.SubCat,"LilianaGalvan", "Liliana Galvan - Case Manager");
    addOption(document.drop_list.SubCat,"KimberlyKoontz", "Kimberly Koontz  - Case Manager Assistant to Liliana Galvan");
    addOption(document.drop_list.SubCat,"ChastaSpikes", "Chasta Spikes  - Case Manager");
    addOption(document.drop_list.SubCat,"SylviaMarsicalShank", "Sylvia Marsical-Shank - Case Manager");
    addOption(document.drop_list.SubCat,"TriciaRomain  ", "Tricia Romain - Case Manager");
    addOption(document.drop_list.SubCat,"BetoRuiz", "Beto Ruiz  - Case Manager");
    addOption(document.drop_list.SubCat,"DavidGarcia", "David Garcia - Case Manager Assistant");
    if(document.drop_list.Department.value == 'Human Resources'){
    addOption(document.drop_list.SubCat,"MarieOkamura", "Marie Okamura - Human Resources Director");
    if(document.drop_list.Department.value == 'Commissions'){
    addOption(document.drop_list.SubCat,"WalterHelbig", "Walter Helbig, FLMI - Licensing");
    addOption(document.drop_list.SubCat,"KenFong", "Ken Fong - Licensing");
    addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Commissions");
    if(document.drop_list.Department.value == 'Licensing'){
    addOption(document.drop_list.SubCat,"TessSlezak ", "Tess Slezak - Licensing");
    addOption(document.drop_list.SubCat,"ArleneAuerhan ", "ArleneAuerhan  - Licensing");
    addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Forms & Supplies");
    if(document.drop_list.Department.value == 'Policy Owner Services'){
    addOption(document.drop_list.SubCat,"LanTran", "Lan Tran - Policy Services");
    addOption(document.drop_list.SubCat,"GianSanchez ", "Gian Sanchez - Receptionist");
    addOption(document.drop_list.SubCat,"ArmonTodd ", "Armon Todd - Office Support");
    if(document.drop_list.Department.value == 'Information Technology'){
    addOption(document.drop_list.SubCat,"HenryCholakyan ", "Henry Cholakyan - IT Director");
    if(document.drop_list.Department.value == 'APS'){
    addOption(document.drop_list.SubCat,"CarmenAllen  ", "Carmen Allen - APS Supervisor");
    function removeAllOptions(selectbox)
    	var i;
    function addOption(selectbox, value, text )
    	var optn = document.createElement("OPTION");
    	optn.text = text;
    	optn.value = value;
    Thanks for any help in advanced!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Portsmouth UK
    Thanked 513 Times in 500 Posts
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <script type="text/javascript">
    var Main=[
     ["ExecutiveManagement", "Executive Management"],
     ["Marketing", "Marketing", ""],
     ["Annuities", "Annuities", ""],
     ["UnderwritingCaseManagement", "Underwriting/Case Management", ""],
     ["HumanResources", "Human Resources", ""],
     ["Commissions", "Commissions", ""],
     ["PolicyOwnerServices", "Policy Owner Services", ""],
     ["Information Technology", "Information Technology", ""],
     ["APS", "APS", ""]
    var ExecutiveManagement=[
    // field 0 = value
    // field 1 = text
    // field 2 = iframe url
     ["MartyGreenberg", "Marty Greenberg - President",'http://www.codingforums.com/showthread.php?t=232218'],
     ["LisaGreenberg ", "Lisa Greenberg - Vice President"],
     ["CraigBrown", "Craig Brown - CFO"],
     ["RitaBogan", "Rita Bogan - Executive Secretary & Case Management"],
     ["DianaGreenberg", "Diana Greenberg - Underwriting Manager"]
    var Marketing=[
     ["RonBielefelt", "Ron Bielefelt - Chief Marketing Officer"],
     ["PeterMilanez", "Peter Milanez - Brokerage Manager"],
     ["MarkRBugli", "Mark R. Bugli - CLU, ChFC "],
     ["HowardMandel", "Howard Mandel - Director of Business Development"],
     ["DeborahSanchez", "Deborah Sanchez - Brokerage Supervisor "],
     ["SylviaMariscal", "Sylvia Mariscal - Life Settlements"],
     ["PeterMilanez", "Peter Milanez - Brokerage Manager"],
     ["JosephTanner", "Joseph Tanner - Brokerage Manager Assistant", ""]
    var Annuities=[
     ["SethMoses", "Seth Moses - Director of Annuities"],
     ["SteveAvila", "Steve Avila - Assistant to Seth Moses"]
    var UnderwritingCaseManagement=[
     ["DianaGreenberg", "Diana Greenberg - Underwriting Manager"],
     ["KimberlyFleming", "Kimberly Fleming - Case Manager "],
     ["LarissaBurton", "Larissa Burton - Case Manager Assistant to Kimberly Fleming"],
     ["MariaAntebi", "Maria Antebi - Case Manager"],
     ["LilianaGalvan", "Liliana Galvan - Case Manager"],
     ["KimberlyKoontz", "Kimberly Koontz  - Case Manager Assistant to Liliana Galvan"],
     ["ChastaSpikes", "Chasta Spikes  - Case Manager"],
     ["SylviaMarsicalShank", "Sylvia Marsical-Shank - Case Manager"],
     ["TriciaRomain  ", "Tricia Romain - Case Manager"],
     ["BetoRuiz", "Beto Ruiz  - Case Manager"],
     ["DavidGarcia", "David Garcia - Case Manager Assistant"]
    var HumanResources=[
     ["MarieOkamura", "Marie Okamura - Human Resources Director"]
    var Commissions=[
     ["WalterHelbig", "Walter Helbig, FLMI - Licensing"],
     ["KenFong", "Ken Fong - Licensing"],
     ["JimTigrak", "Jim Tigrak - Commissions"]
    var Licensing=[
     ["TessSlezak ", "Tess Slezak - Licensing"],
     ["ArleneAuerhan ", "ArleneAuerhan  - Licensing"],
     ["JimTigrak", "Jim Tigrak - Forms & Supplies"]
    var PolicyOwnerServices=[
     ["LanTran", "Lan Tran - Policy Services"],
     ["GianSanchez ", "Gian Sanchez - Receptionist"],
     ["ArmonTodd ", "Armon Todd - Office Support"]
    var InformationTechnology=[
     ["HenryCholakyan ", "Henry Cholakyan - IT Director"]
    var APS=[
     ["CarmenAllen  ", "Carmen Allen - APS Supervisor"]
    function fill(select,ary){
     if (select&&ary){
      var z0=0,optn;
      for (;z0<ary.length;z0++){
       optn = document.createElement("OPTION");
       optn.value = ary[z0][0];
       optn.text = ary[z0][1];
    function load(id,main,index){
     var ary=window[document.drop_list[main].value];
     if (ary&&ary[index-1]&&ary[index-1][2]){
    <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fill('Department','Main');">
    <FORM name="drop_list" action="yourpage.php" method="POST" >
    <SELECT  NAME="Department" onChange="fill('SubCat',this.value);" >
    <Option value="">Select Department</option>
    <SELECT id="SubCat" NAME="SubCat" onchange="load('iframe','Department',this.selectedIndex);">
    <Option value="">SubCat</option>
    <iframe id="iframe" src="#" frameborder="0"></iframe></body>

    God Loves You and will never love you less.


    If my post has been useful please donate to http://www.operationsmile.org.uk/


    Posting Permissions

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