PDA

View Full Version : Using two Double combo box scripts

JustAsking
10-15-2002, 07:14 AM
I am trying to use two double combo box scripts on the one page, but when I select a menu item in the first select list of the first double combo box script it changes the value of the second select list in the second combo box script. Is it possible to have two of these scripts on the same page. I have checked that the selct lists and form names are all different so I am stuck, following is the code for the two scripts I am using:

---------code----------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<p>Please select the Division/Unit <i>Operational Plan</i> you wish to access:</p>
<form name="operationalplan">
<p><select name="opplan" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Building Division</option>
<option>Executive Services</option>
<option>External Relations</option>
<option>Finance and Information Technology</option>
<option>Goprint</option>
<option>Infrastructure and Major Projects</option>
<option>Internal Audit</option>
<option>Legal and Contractual</option>
<option>Planning and Human Resources</option>
<option>Project Services</option>
<option>QBuild</option>
<option>QFleet</option>
<option>Queensland Purchasing</option>
<option>SDS</option>
</select></p><p>Please select the <i>Unit/Branch</i>:</p>
<p><select name="opplan2" size="1">
<option value="amuoperationalplan.html">Asset Management Unit</option>
<option value="bdsuoperationalplan.html">Business Development and Support Unit</option>
<option value="beruoperationalplan.html">Built Environment Research Unit</option>
<option value="goauoperationalplan.html">Government Office Accomodation Unit</option>
<option value="ipuoperationalplan.html">Industry Policy Unit</option>
<option value="phuoperationalplan.html">Portfolio and Housing Unit</option>
</select></p>
<form name="operational">
<p>username: <input type="text" name="username" size="20"></p>
<p>password: <input type="password" name="password" size="20"></p>
<p><input type="button" value="Edit Operational Plan"></p>
</form>
</p>
<script>
<!--

var groups=document.operationalplan.opplan.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Asset Management Unit","amuoperationalplan.html")
group[0][1]=new Option("Business Development and Support Unit","bdsuoperationalplan.html")
group[0][2]=new Option("Built Environment Research Unit","beruoperationalplan.html")
group[0][3]=new Option("Government Office Accomodation Unit","goauoperationalplan.html")
group[0][4]=new Option("Industry Policy Unit","ipuoperationalplan.html")
group[0][5]=new Option("Portfolio and Housing Unit","phuoperationalplan.html")

group[1][0]=new Option("Executive Services sections","#")
group[1][1]=new Option("Executive Services sections 2","#")

group[2][0]=new Option("External Relations sections","#")
group[2][1]=new Option("External Relations sections 2","#")

group[3][0]=new Option("Finance and Information Technology sections","#")
group[3][1]=new Option("Finance and Information Technology sections 2","#")

group[4][0]=new Option("Goprint sections","#")
group[4][1]=new Option("Goprint sections 2","#")

group[5][0]=new Option("Infrastructure and Major Projects sections","#")
group[5][1]=new Option("Infrastructure and Major Projects sections 2","#")

group[6][0]=new Option("Internal Audit sections","#")
group[6][1]=new Option("Internal Audit sections 2","#")

group[7][0]=new Option("Legal and Contractual sections","#")
group[7][1]=new Option("Legal and Contractual sections 2","#")

group[8][0]=new Option("Planning and Human Resources sections","#")
group[8][1]=new Option("Planning and Human Resources sections 2","#")

group[9][0]=new Option("Project Services sections","#")
group[9][1]=new Option("Project Services sections 2","#")

group[10][0]=new Option("QBuild sections","#")
group[10][1]=new Option("QBuild sections 2","#")

group[11][0]=new Option("QFleet sections","#")
group[11][1]=new Option("QFleet sections 2","#")

group[12][0]=new Option("Queensland Purchasing sections","#")
group[12][1]=new Option("Queensland Purchasing sections 2","#")

group[13][0]=new Option("SDS sections","#")
group[13][1]=new Option("SDS sections 2","#")

var temp=document.operationalplan.opplan2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
</form>
<p><input type="button" value="View/Print Operational Plan" name="op"></p>
<p>&nbsp;</p>
<p>Please select the Division/Unit <i>Operational Plan Review</i> you wish to access:</p>
<form name="review">
<p><select name="review2" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Building Division</option>
<option>Executive Services</option>
<option>External Relations</option>
<option>Finance and Information Technology</option>
<option>Goprint</option>
<option>Infrastructure and Major Projects</option>
<option>Internal Audit</option>
<option>Legal and Contractual</option>
<option>Planning and Human Resources</option>
<option>Project Services</option>
<option>QBuild</option>
<option>QFleet</option>
<option>Queensland Purchasing</option>
<option>SDS</option>
</select></p><p>Please select the <i>Unit/Branch</i>:</p>
<p><select name="review3" size="1">
<option value="amuoperationalplan.html">Asset Management Unit</option>
<option value="bdsuoperationalplan.html">Business Development and Support Unit</option>
<option value="beruoperationalplan.html">Built Environment Research Unit</option>
<option value="goauoperationalplan.html">Government Office Accomodation Unit</option>
<option value="ipuoperationalplan.html">Industry Policy Unit</option>
<option value="phuoperationalplan.html">Portfolio and Housing Unit</option>
</select></p>
<form name="review4">
<p>username: <input type="text" name="username" size="20"></p>
<p>password: <input type="password" name="password" size="20"></p>
<p><input type="button" value="Edit Operational Plan Review"></p>
</form>
</p>
<script>
<!--

var groups=document.review.review2.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Asset Management Unit","amuoperationalplan.html")
group[0][1]=new Option("Business Development and Support Unit","bdsuoperationalplan.html")
group[0][2]=new Option("Built Environment Research Unit","beruoperationalplan.html")
group[0][3]=new Option("Government Office Accomodation Unit","goauoperationalplan.html")
group[0][4]=new Option("Industry Policy Unit","ipuoperationalplan.html")
group[0][5]=new Option("Portfolio and Housing Unit","phuoperationalplan.html")

group[1][0]=new Option("Executive Services sections","#")
group[1][1]=new Option("Executive Services sections 2","#")

group[2][0]=new Option("External Relations sections","#")
group[2][1]=new Option("External Relations sections 2","#")

group[3][0]=new Option("Finance and Information Technology sections","#")
group[3][1]=new Option("Finance and Information Technology sections 2","#")

group[4][0]=new Option("Goprint sections","#")
group[4][1]=new Option("Goprint sections 2","#")

group[5][0]=new Option("Infrastructure and Major Projects sections","#")
group[5][1]=new Option("Infrastructure and Major Projects sections 2","#")

group[6][0]=new Option("Internal Audit sections","#")
group[6][1]=new Option("Internal Audit sections 2","#")

group[7][0]=new Option("Legal and Contractual sections","#")
group[7][1]=new Option("Legal and Contractual sections 2","#")

group[8][0]=new Option("Planning and Human Resources sections","#")
group[8][1]=new Option("Planning and Human Resources sections 2","#")

group[9][0]=new Option("Project Services sections","#")
group[9][1]=new Option("Project Services sections 2","#")

group[10][0]=new Option("QBuild sections","#")
group[10][1]=new Option("QBuild sections 2","#")

group[11][0]=new Option("QFleet sections","#")
group[11][1]=new Option("QFleet sections 2","#")

group[12][0]=new Option("Queensland Purchasing sections","#")
group[12][1]=new Option("Queensland Purchasing sections 2","#")

group[13][0]=new Option("SDS sections","#")
group[13][1]=new Option("SDS sections 2","#")

var temp=document.review.review3

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
</form>
<p><input type="button" value="View/Print Operational Plan Review"></p>
</body>
</html>
glenngv
10-15-2002, 07:39 AM
you just pasted the same functions in the same page.
remember, functions should have unique names!

what you should do is make the redirect function generic like this: (remove the other redirect() function)


function redirect(x,sel2){
for (m=sel2.options.length-1;m>0;m--)
sel2.options[m]=null
for (i=0;i<group[x].length;i++){
sel2.options[i]=new Option(group[x][i].text,group[x][i].value)
}
sel2.options[0].selected=true
}

sel2 is the reference to the select tag you want to redirect to.
previously, it was the value of temp variable.


then you'd call it like this:

<select name="opplan" size="1" onChange="redirect(this.options.selectedIndex,this.form.opplan2)">


i noticed you didn't use go() function.
if you really don't want to use it, remove it.
but if you will use it, you also need to make it generic like this: (remove the other go() function)

function go(sel){
location=sel.options[sel.selectedIndex].value
}

then you'd call it like this:
<input type="button" value="Go" onclick="go(this.form.opplan2)">
JustAsking
10-16-2002, 12:34 AM
Thank you for your help glenngv, the code now works correctly :thumbsup:
whammy
10-16-2002, 12:57 AM
I just have to comment on your signature, JustAsking. How right you are (especially if you are a gamer!).