View Full Version : Need help with 2 level, drop down list

07-17-2011, 09:48 PM
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!

07-18-2011, 09:59 AM
<!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>