Hallo,
<html>
<head>
<title>json_selectboxes.js</title>
<script type="text/javascript" src="json_selectboxes.js"></script>
</head>
<body>
<p>
<select id="städte">
</select>
<select id="locations">
<option>erst Stadt wählen</option>
</select>
<p>
</body>
</html>
json_selectboxes.js
/* created by php:
<?php
$locations["Stadt wählen"][]="erst Stadt wählen";
$locations["hamburg"][]="Alsterhaus";
$locations["hamburg"][]="Alsterhaus2";
$locations["hamburg"][]="Alsterhaus3";
$locations["berlin"][]="Scheinbar";
$locations["berlin"][]="Scheinbar2";
$locations["berlin"][]="Scheinbar3";
echo "locationListe =" . json_encode($locations);
?>
*/
locationsListe = {
"Stadt wählen":
["erst Stadt wählen"],
"hamburg":
["Alsterhaus1","Alsterhaus2","Alsterhaus3"],
"berlin":
["Scheinbar1","Scheinbar2","Scheinbar3"]
}
window.onload = function() {
// locate an name locationSelectbox
locationbox = document.getElementById("locations");
// locate an name städteSelectbox
städtebox = document.getElementById("städte");
insertStädteOptions();
}
// baute die Städteoptionen gemöß JSON-Objekt ein und versieht sie mit Onclick-Listener
insertStädteOptions = function() {
// die "keys" aus der Locationliste sind die städte
for (var i in locationsListe) {
städteoption = document.createElement("option");
städteoption.innerHTML = i;
städteoption.onclick = optioncheck;
städtebox.appendChild(städteoption);
}
}
// entfernt Locationoptions und fügt die gefragten Hinzu gemäß o.g. JSON-Objekt
optioncheck = function() {
currentLocationOptions = locationbox.getElementsByTagName("option");
currentLocationOptionsCount = currentLocationOptions.length;
for (var i = 0; i < currentLocationOptionsCount; i++) {
locationbox.removeChild(currentLocationOptions[0]);
}
for ( var i = 0; i < locationsListe[this.innerHTML].length; i++) {
newLocationOption = document.createElement("option");
newLocationOption.innerHTML = locationsListe[this.innerHTML][i];
locationbox.appendChild(newLocationOption);
}
}
ja self noch eins.
Gruß
jobo