PDA

View Full Version : Drop down with automatic selection


hazzo
09-24-2007, 04:10 AM
Hi, I'm using the script below and would like to be able to automatically load a page in an iframe (on the same page) when the last selection is made. For example Aircraft type "A340" would open a340.html in an ifram on the same page. Anyone has an idea on how to do it?
Is there also a way to have different amounts of subselections and redirect when the last possible selection is made? I.e. Airbus 340 would have two more selections type "-300" and "-600" and redirect when one of them is selected whereas A330 wouldn't have any more subselections and would redirect when selecting A330...

Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Aicraft selection</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var varieties=[
["Aircraft type"],
["Aircraft type","A340","A330","A380"],
["Aircraft type","MD11","DC10","B747"],
["Aircraft type","J35","J37","J39"]
];

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);
}
}

onload=function() {Box2(0);};
</script>
</head>
<body>
<form name="myform" method="post" action="#">
<div>
<select name="box1" onchange="Box2(this.selectedIndex)">
<option value="a">Aircraft maker</option>
<option value="b">Airbus</option>
<option value="c">Boeing</option>
<option value="d">Saab</option>
</select>
<select name="box2"></select>
</div>
</form>
</body>
</html>
codeexploiter
09-24-2007, 05:07 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Aicraft selection</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var varieties=[
["Aircraft type"],
["Aircraft type","A340","A330","A380"],
["Aircraft type","MD11","DC10","B747"],
["Aircraft type","J35","J37","J39"]
];

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 = bx2.options[idx].text +".htm";
}
onload=function() {Box2(0);};
</script>
</head>
<body>
<form name="myform" method="post" action="#">
<div>
<select name="box1" onchange="Box2(this.selectedIndex)">
<option value="a">Aircraft maker</option>
<option value="b">Airbus</option>
<option value="c">Boeing</option>
<option value="d">Saab</option>
</select>
<select name="box2" onchange="loadPage(this.selectedIndex)"></select>
</div>
</form>
<div id="ifram">
<iframe width="900" height="600" frameborder="0" scrolling="no" src="" id="disIframe"></iframe>
</div>
</body>
</html>


Check the above code the changes made by me is in blue color. I think the way you need to show the selection list can be handled using Javascript without much trouble.

You need to make sure that the .htm pages should be present with the name of the select box text and make sure that you've mentioned correct file path
gcrawford
10-21-2008, 06:32 AM
I'm trying to do something very similar to this, but I don't need two dropdown menus - just one.

When someone makes a selection from that one menu, I'd like the iframe to open. The code posted here has 2 dropdown menus, box2 depends on box1. I only need one box, with my dropdown items in it, when selected open in the iframe.

I've played around with the code a bit, but can't get it to work.

Any help is appreciated - thanks!