jobo: Prinzip zweier abhängiger Selectboxen

Beitrag lesen

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