<html>
<head>
<title>select galore</title>
<script language="JavaScript" type="text/javascript">
<!--
selitems = new Array();
// de selectknop heeft geen items
selitems[0] = null;
// België - heeft die eigenlijk wel provincies ?
selitems[1] = new Array('val', 'txt');
// we doen net alsof Nederland geen provincies heeft
selitems[2] = null;
// VS - staten
selitems[3] = new Array('val', 'txt');
// sub-items voor België - eerste item is altijd een select-item, met lege value
selitems[1]['val'] = new Array("","prov1", "prov2", "prov3");
selitems[1]['txt'] = new Array("select:", "provincie 1", "provincie 2", "provincie 3");
// subitems voor de VS - eerste item is altijd een select-item, met lege value
selitems[3]['val'] = new Array("", "st1", "st2", "st3", "st4");
selitems[3]['txt'] = new Array("select:", "staat 1", "staat 2", "staat 3", "staat 4");
function change2(sel, frm, tgt) {
var opt = sel.options[sel.selectedIndex].value;
// als het geselecteerde item extra waarden heeft
if(selitems[opt] != null) {
// geef aan hoeveel items de tweede selectbox heeft
document.frm.elements[tgt].options.length = selitems[opt]['val'].length;
// vul de tweede selectbox met de waarden en texten
for(i=0; i < selitems[opt]['val'].length; i++) {
document.frm.elements[tgt].options[i].value = selitems[opt]['val'][i];
document.frm.elements[tgt].options[i].text = selitems[opt]['txt'][i];
}
}
// is er een item geselecteerd die geen extra items heeft? Zoja - verberg de tweede selectbox
(selitems[opt] == null) ? hideLayer("opt") : showLayer("opt");
}
// voor het tonen / verbergen van layers
// http://www.chunkysoup.net/basic/js3step/js_3step.4.html
function hideLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "hidden";
} else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "hidden";
} else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "hidden";
}
}
function showLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "visible";
} else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "visible";
} else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "visible";
}
}
-->
</script>
</head>
<body>
<form name="frm" action="" method="post">
<select name="sel1" onChange="change2(this,'frm','sel2');">
<option value="0">select:</option>
<option value="1">België</option>
<option value="2">Nederland</option>
<option value="3">VS</option>
</select>
<br>
<!-- initieel is de tweede selectbox niet te zien -->
<div id="opt" style="visibility: hidden;">
<!-- de volgende onChange is debug -->
<select name="sel2" onChange="alert(this.value);">
<!-- je wilt dat er hier alleen een value wordt geselecteerd wanneer de eerste selectbox is veranderd -->
</select>
</div>
</form>
</body>
</html>
Ik denk wel dat ik weet wat ik fout doe, maar niet hoe ik dit verhelp zeg maar..
Dit is nu mijn script.. alleen komt er nu dus helemaal geen 2de keuze bij... Enne, Is het met dit script wel mogelijk om er dan bv ook nog een derde keuze bij te maken????? Das wel mn bedoeling namelijk..
function change2(sel, frm, tgt) {
var opt = sel.options[sel.selectedIndex].value;
// als het geselecteerde item extra waarden heeft
if(selitems[opt] != null) {
// geef aan hoeveel items de tweede selectbox heeft
document.frm.elements[tgt].options.length = selitems[opt]['val'].length;
// vul de tweede selectbox met de waarden en texten
for(i=0; i < selitems[opt]['val'].length; i++) {
document.frm.elements[tgt].options[i].value = selitems[opt]['val'][i];
document.frm.elements[tgt].options[i].text = selitems[opt]['txt'][i];
}
}
// is er een item geselecteerd die geen extra items heeft? Zoja - verberg de tweede selectbox
(selitems[opt] == null) ? hideLayer("opt") : showLayer("opt");
}
// voor het tonen / verbergen van layers
// http://www.chun...tep.4.html
function hideLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "hidden";
} else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "hidden";
} else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "hidden";
}
}
function showLayer(whichLayer) {
if (document.getElementById) {
// this is the way the standards work
document.getElementById(whichLayer).style.visibility = "visible";
} else if (document.all) {
// this is the way old msie versions work
document.all[whichlayer].style.visibility = "visible";
} else if (document.layers) {
// this is the way nn4 works
document.layers[whichLayer].visibility = "visible";
}
}
-->
</script>
</head>
<body>
<form name="frm" action="" method="post">
<select name="sel1" onChange="change2(this,'frm','sel2');">
<option value="0">select:</option>
<option value="1">Afrika</option>
<option value="2">Australie</option>
<option value="3">Azie</option>
<option value="4">Europa</option>
<option value="5">Noord-Amerika</option>
<option value="6">Zuid-Amerika</option>
</select>
<br>
<!-- initieel is de tweede selectbox niet te zien -->
<div id="opt" style="visibility: hidden;">
<!-- de volgende onChange is debug -->
<select name="sel2" onChange="alert(this.value);">
<!-- je wilt dat er hier alleen een value wordt geselecteerd wanneer de eerste selectbox is veranderd -->
</select>
</div>
</form>
</body>
</html>