codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
var oSelect1, oSelect2, oSelectContent = {
"Salsiccia": ["Pane", "Sugo"],
"Fragole": ["Gelato", "Nutella"]
};
function makeSelect2 () {
var oNewOpt, aOldOpts = oSelect2.options, aNewValues = oSelectContent[oSelect1.options[oSelect1.selectedIndex].value];
for (aOldOpts; aOldOpts.length > 0; oSelect2.removeChild(aOldOpts[0]));
for (var nItem = 0; nItem < aNewValues.length; nItem++) {
oNewOpt = document.createElement("option");
oNewOpt.value = aNewValues[nItem];
oNewOpt.innerHTML = aNewValues[nItem];
oSelect2.appendChild(oNewOpt);
}
}
window.onload = function () {
var oOpt;
oSelect1 = document.getElementById("scelta1");
oSelect2 = document.getElementById("scelta2");
oSelect1.onchange = makeSelect2;
for (var sValue in oSelectContent) {
oOpt = document.createElement("option");
oOpt.value = sValue;
oOpt.innerHTML = sValue;
oSelect1.appendChild(oOpt);
}
oSelect1.selectedIndex = 0;
makeSelect2();
}
</script>
</head>
<body>
<form name="tuoForm">
Scelta #1 <select id="scelta1" name="primascelta"></select> Scelta #2 <select id="scelta2" name="secondascelta"></select></p>
</form>
</body>
</html>
Rispondi quotando
.
