nicht angemeldet
Hi Benjamin,
hier eine quick-and-dirty-Variante von mir.
Trotz aller bekannten Vorbehalte gegenüber Javascript: Es funktioniert (nur mit MSIE 6.0 getestet!).
Natürlich gibt es mindestens ein Dutzend elegantere Lösungen, aber mehr ist mir ad hoc nicht eingefallen.
Man mögen mir eventuelle (rotweinbedingte :-) logische Fehler und unsaubere Kommentare verzeihen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Dropdowns mit Javascript</title>
<script type="text/javascript">
// your 'database'
// all your cars with match code and shown name
var cars = [
['mb', 'Mercedes'],
['bmw','BMW']
];
var cars_mc = 0;
var cars_name = 1;
// all your types with foreign match code [table cars], own match code and shown name
var types = [
['bmw','3er', '3er Serie'],
['bmw','5er', '5er Serie'],
['mb', 'slr', 'SLR'],
['mb', 'sl55','SL55']
]
var types_cars_mc = 0;
var types_mc = 1;
var types_name = 2;
// all your colors with foreign match code [types] and shown name
colors = [
['3er', 'Silbergrau'],
['3er', 'Kackbrau'],
['5er', 'Dschungelgrün'],
['5er', 'Unfarbig'],
['slr', 'Schwarz'],
['slr', 'Schwarz'],
['sl55','Silber'],
['sl55','Postgelb']
]
var colors_types_mc = 0;
var colors_name = 1;
// creates a select with all cars
// parameters: none
function WriteCarsSelect() {
var cars_text = '<select name="selectCars" onChange="WriteTypesSelect(document.formCarSelctor.selectCars.options[this.selectedIndex].value);"><option value="-">please select</option>';
var x = 0;
for (x=0; x<cars.length; x++){
cars_text += '<option value="'+cars[x][cars_mc]+'">'+cars[x][cars_name]+'</option>';
}
cars_text += '</select>';
document.getElementById('cars').innerHTML = cars_text;
}
// creates a select with all types of a car
// parameters: match code of a car [cars_mc.value == types_cars_mc.value]
function WriteTypesSelect(types_cars_mc_sended) {
//alert(types_cars_mc_sended);
var types_text = '<select name="selectTypes" onChange="WriteColorsSelect(document.formCarSelctor.selectTypes.options[this.selectedIndex].value);"><option value="-">please select</option>';
var y = 0;
for (y=0; y<types.length; y++) {
if (types_cars_mc_sended == types[y][types_cars_mc]) {
types_text += '<option value="'+types[y][types_mc]+'">'+types[y][types_name]+'</option>';
}
}
types_text += '</select>';
document.getElementById('types').innerHTML = types_text;
}
// creates a select with all colors of a type
// parameters: match code of a type [colors_mc.value == colors_types_mc.value]
function WriteColorsSelect(colors_types_mc_sended) {
//alert(colors_types_mc_sended);
var colors_text = '<select name="selectColors"><option value="-">please select</option>';
var z = 0;
for (z=0; z<colors.length; z++) {
if (colors_types_mc_sended == colors[z][colors_types_mc]) {
colors_text += '<option value="'+colors[z][colors_name]+'">'+colors[z][colors_name]+'</option>';
}
}
colors_text += '</select>';
document.getElementById('colors').innerHTML = colors_text;
}
</script>
</head>
<body>
<form name="formCarSelctor" action="bal/foo.php">
<p id="cars"><script type="text/javascript">WriteCarsSelect();</script></p>
<p id="types"></p>
<p id="colors"></p>
</form>
</body>
</html>
Gruß von Tom C