Ændre indholde af dropdown menu, baseret på en anden dropdown (3 i alt)
Hej EksperterJeg har en form, hvor jeg skal kunne vælge nogle dropdown-menuer. Det funger sådan, at vælger du fx Audi i den første bliver den næste dropdown ændret til kun at indeholde Audi-modeller. Når man så vælger i næste dropdown Audi-Modellen, får du fx år. Dvs. de er altså dynamiske baseret på hvad der er valgt først.
Mit Problem er, hvis man har valgt som mit eksempel, og man så ændre første dropdown til BMW, så skal 2 og 3 dropdown ændres. Jeg har lidt med at den ikke ændre det hele i dropdown-menuen. Forstår faktisk ikke hvorfor den skriver som den gør.
Håber nogen kan hjælpe. Har tænkt lidt om det kræver at man HIDE og SHOW, så der er to forskellige dropdown-menu?
======================= KODE =========================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Change selection in one box from another</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var varieties=[
["varieties","granny smith","golden delicious","jonathan"],
["varieties","anjou","bartlett","conference"],
["varieties","valencia","pineapple","pera", "test"]
];
var all=[
["1", "2", "3"]
];
function Box2(idx) {
var f=document.myform;
alert(idx);
f.box2.options.length=null;
for(i=0; i<varieties[idx].length; i++) {
f.box2.options[i]=new Option(varieties[idx][i], i);
}
for(i=0; i<all[0].length; i++) {
f.box3.options[i]=new Option(all[0][i], i);
}
}
function Box3(idx) {
var f=document.myform;
alert(idx);
f.box3.options.length=null;
for(i=0; i<varieties[idx].length; i++) {
f.box3.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">apple</option>
<option value="b">pear</option>
<option value="c">orange</option>
</select>
<select name="box2" onChange="Box3(this.selectedIndex)"></select>
<select name="box3"></select>
</div>
</form>
</body>
</html>
