Log in

View Full Version : Menu with drop down boxes



hazzo
12-15-2007, 05:41 PM
Hi I'm using the script below for a menusystem which opens a new page in an iFrame. So far I'm only able to get it to work with 3 option values (a, b and c) and their corresponding varieties for box 2.
Is there anyone who can help me to get the script working for more values (d, e, f.......) and varieties that corresponds to them?
Many thanks!

<!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">

<head>
<script type="text/javascript">
var varieties=[
["Kemikalietyp"],
["Kemi","Algicid","PHMB Desinfektion","Schock","0230"],
["Kemikalietyp","Sandfilter med bronsventil","Sandfilter med plastventil"],
];

function Box2(idx) {
var f=document.myform;
f.box2.options.length=null;
for(i=0; i<varieties[idx].length; i++) {
f.box2.options[i]=new Option(varieties[idx][i], i);
}
}
function loadPage(idx){
var bx2 = document.getElementsByName('box2')[0];
document.getElementById('disIframe').src = "kemi/"+ bx2.options[idx].text +".htm";
}
onload=function() {Box2(0);};
</script>

</head>

<body>
<p class="t01" style="FONT-SIZE: 12px">
<form name="myform" method="post" action="#">
<div>
<select name="box1" onchange="Box2(this.selectedIndex)">
<option value="a" selected>Kemikaliepaket</option>
<option value="b">Baquacil</option>
<option value="c">Saniklar</option>

</select>
<select name="box2" onchange="loadPage(this.selectedIndex)"></select>
</div>
</form>
<div id="ifram">
<iframe height="300" width="778" frameborder="0" scrolling="no" src="" id="disIframe"></iframe>
</div>


</body>

</html>

BLiZZaRD
12-15-2007, 07:02 PM
You just need to add them following the same methods..

for varieties just add them inline...



var varieties=[
["Kemikalietyp"],
["Kemi","Algicid","PHMB Desinfektion","Schock","0230"],
["Kemikalietyp","Sandfilter med bronsventil","Sandfilter med plastventil"],
["variety_for_d"],
["variety_for_e"],
["variety_for_f"],
];


and for the options... the same thing...



<select name="box1" onchange="Box2(this.selectedIndex)">
<option value="a" selected>Kemikaliepaket</option>
<option value="b">Baquacil</option>
<option value="c">Saniklar</option>
<option value="d">Name of D</option>
<option value="e">Name of E</option>
<option value="f">Name of F</option>


Unless there is some underlying problem you haven't shared...

hazzo
01-06-2008, 10:16 AM
Thank you BLiZZaRD, it was easier than I expected. Would you or anyone know if it would be possible to add a third drop down box to the same script? And, if so, could the last item in the selection (even if in box #2) be automatically selected?