...

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



exfakto
07-17-2011, 08: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>&nbsp;
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>


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

removeAllOptions(document.drop_list.SubCat);
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;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}
}


function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;

selectbox.options.add(optn);
}


Thanks for any help in advanced!

vwphillips
07-18-2011, 08:59 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
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){
select=document.drop_list[select];
ary=window[ary];
if (select&&ary){
var z0=0,optn;
select.options.length=1;
for (;z0<ary.length;z0++){
optn = document.createElement("OPTION");
optn.value = ary[z0][0];
optn.text = ary[z0][1];
select.options.add(optn);
}
}

}

function load(id,main,index){
var ary=window[document.drop_list[main].value];
if (ary&&ary[index-1]&&ary[index-1][2]){
document.getElementById(id).src=ary[index-1][2];
}
}


/*]]>*/
</script></head>

<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>&nbsp;
<SELECT id="SubCat" NAME="SubCat" onchange="load('iframe','Department',this.selectedIndex);">
<Option value="">SubCat</option>
</SELECT>
</form>

<iframe id="iframe" src="#" frameborder="0"></iframe></body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum