Der er da ingen problemer i at have flere, du skal bare huske at der er to steder, der skal tilpasses:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Smart selects</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK HREF="style/style.css" REL="stylesheet" TYPE="text/css">
<style type="text/css">
body{padding:10px;font-family:Tahoma,Verdana,Arial,sans-serif;text-align:center;background:#EBD3E2;line-height:1.5;overflow:hidden;}
</style>
<script language="javascript" type="text/javascript">
var arr = [
["Valg 1",[
["2. valg 1 (1)",
["3. valg 1 (1-1)","3. valg 2 (1-1)","3. valg 3 (1-1)","3. valg 4 (1-1)"]],
["2. valg 2 (1)",
["3. valg 1 (1-2)","3. valg 2 (1-2)","3. valg 3 (1-2)"]],
["2. valg 3 (1)",
["3. valg 1 (1-3)","3. valg 2 (1-3)","3. valg 3 (1-3)","3. valg 4 (1-3)"]]]],
["Valg 2",[
["2. valg 1 (2)",
["3. valg 1 (2-1)","3. valg 2 (2-1)","3. valg 3 (2-1)","3. valg 4 (2-1)"]],
["2. valg 2 (2)",
["3. valg 1 (2-2)","3. valg 2 (2-2)"]],
["2. valg 3 (2)",
["3. valg 1 (2-3)","3. valg 2 (2-3)","3. valg 3 (2-3)","3. valg 4 (2-3)","3. valg 5 (2-3)","3. valg 6 (2-3)","3. valg 7 (2-3)","3. valg 8 (2-3)","3. valg 9 (2-3)","3. valg 10 (2-3)","3. valg 11 (2-3)","3. valg 12 (2-3)","3. valg 13 (2-3)","3. valg 14 (2-3)","3. valg 15 (2-3)","3. valg 16 (2-3)","3. valg 17 (2-3)","3. valg 18 (2-3)","3. valg 19 (2-3)","3. valg 20 (2-3)","3. valg 21 (2-3)"]],
["2. valg 4 (2)",
["3. valg 1 (2-4)","3. valg 2 (2-4)","3. valg 3 (2-4)","3. valg 4 (2-4)"]]]],
["Valg 3",[
["2. valg 1 (3)",
["3. valg 1 (3-1)","3. valg 2 (3-1)","3. valg 3 (3-1)"]],
["2. valg 2 (3)",
["3. valg 1 (3-2)","3. valg 2 (3-2)","3. valg 3 (3-2)"]],
["2. valg 3 (3)",
["3. valg 1 (3-3)","3. valg 2 (3-3)","3. valg 3 (3-3)"]],
["2. valg 4 (3)",
["3. valg 1 (3-4)","3. valg 2 (3-4)","3. valg 3 (3-4)"]],
["2. valg 5 (3)",
["3. valg 1 (3-5)","3. valg 2 (3-5)","3. valg 3 (3-5)"]]]]
];
//alert(arr1[1][1])
function initSels(){
createOpts(document.getElementById('sel1'));
createOpts(document.getElementById('sel3'));
createOpts(document.getElementById('sel6'));
createOpts(document.getElementById('sel8'));
}
function createOpts(sel){
var s = new Array();
var num = 0, txt = "arr";
var ar = opt = null;
var n = sel.selectedIndex;
var args = createOpts.arguments.length;
for(var i=1;args>i;i++){
s[i-1] = document.getElementById(createOpts.arguments[i]);
if(s[i-1]==sel)num=i;
}
if(args>1){
if(s[num])sel = s[num];
else return;
}
if(n==0&&args>1){
for(i=num;args>i+1;i++){
s[i].length = 0;
opt = document.createElement('OPTION');
s[i].appendChild(opt);
opt.value = "";
opt.text = "\74-- Vælg --";
}
return true
};
for(i=0;num>i;i++){
txt+="["+(s[i].selectedIndex-1)+"][1]";
}
ar = eval(txt);
sel.length = 0;
opt = document.createElement('OPTION');
sel.appendChild(opt);
opt.value = "";
opt.text = "-- Vælg --";
for(i=0;ar.length>i;i++){
opt = document.createElement('OPTION');
sel.appendChild(opt);
if(typeof ar[i] == 'object'){
opt.value = ar[i][0];
opt.text = ar[i][0];
}else{
opt.value = ar[i];
opt.text = ar[i];
}
}
if(args>num+2){
for(i=num+1;args-1>i;i++){
s[i].length = 0;
opt = document.createElement('OPTION');
s[i].appendChild(opt);
opt.value = "";
opt.text = "\74-- Vælg --";
}
}
}
</script>
</head>
<body style="font-size: 12px" onload="initSels()">
<h1 style="line-height: 0.8">Working demo #4 beta2</h1>
Afhængige selects<br><br>
<div style="text-align: left">
<form name="sels" action="
http://roenving.users.whitehat.dk" onsubmit="return false;">
To afhængige selects:
<select name="sel1" id="sel1" onchange="createOpts(this,'sel1','sel2');">
<option value="" selected>Vis alle</option>
</select>
<select name="sel2" id="sel2">
<option value="" selected
><-- Vælg --</option>
</select> <br><br>
Tre afhængige selects:
<select name="sel3" id="sel3" onchange="createOpts(this,'sel3','sel4','sel5');">
<option value="" selected>Vis alle</option>
</select>
<select name="sel4" id="sel4" onchange="createOpts(this,'sel3','sel4','sel5');">
<option value="" selected><-- Vælg --</option>
</select>
<select name="sel5" id="sel5">
<option value="" selected
><-- Vælg --</option>
</select> <br><br>
To afhængige selects:
<select name="sel6" id="sel6" onchange="createOpts(this,'sel6','sel7');">
<option value="" selected>Vis alle</option>
</select>
<select name="sel7" id="sel7">
<option value="" selected
><-- Vælg --</option>
</select> <br><br>
Tre afhængige selects:
<select name="sel8" id="sel8" onchange="createOpts(this,'sel8','sel9','sel10');">
<option value="" selected>Vis alle</option>
</select>
<select name="sel9" id="sel9" onchange="createOpts(this,'sel8','sel9','sel10');">
<option value="" selected><-- Vælg --</option>
</select>
<select name="sel10" id="sel10">
<option value="" selected
><-- Vælg --</option>
</select> <br><br>
</form>
<br><br>
</div><br><br>
Pt. kan koden ses ved: <span class="i">Vis kode</span>,<br>
jeg vil snarest sørge for at den er tilgængelig kopierbar (som i de andre WD's)<br>
<span class="b">Bemærk</span>, at javascript-databasen er følsom overfor småfejl i [ / ] -erne ...
<br><br>
<h6><!-- WebWriter AutoDato -->Sidste opdatering 12.08.2003<!-- WW --></h6>
</body>
</html>
