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>