nicht angemeldet
Hilfe: 3x Dropdown Daten abhängig vom vorigen selektieren
Hallo zusammen!
Ich hab da mal ein für mich grosses Problem:
Ich benötige für ein Formular drei Drop Down Felder, die jeweils vom vorherigen die Daten selektieren:
z.B.: erstes DropDown:
Mercedes
BMW
zweites DropDown: z.B.: Mercedes im ersten gewählt:
SLR
SL55
drittes DropDown: SL55 im zweiten gewählt:
schwarz
silber
und halt mit diesen 3 DropDown Feldern eine gleiche Selektion mit anderen Autoherstellern über Modell bis zur Farbe möglich ist und ich diese ausgewählten Daten dann einfach über einen normalen Formularmailer senden kann.
Grundsätzlich soll halt nicht möglich sein das ich zum Hersteller das falsche Modell wählen kann.
BITTE BEACHTET: Ich bin kein Java Profi, bzw. ich weiss nur wie ich ein funktionierendes Script anpassen kann - mehr leider nicht!
Bitte helft mir, da ich schon seit 2 Tagen wie ein blöder im Internet gesucht habe und nur super Lösungen gefunden hab, die aber leider alle nur als Menu funktionieren und am Ende eine HTML Seite aufrufen und ich ja die Daten für den Formularmailer benötige, daher für mich unbrauchbar.
Ich bin für jeden Tip super dankbar!!!!!!
Danke für Eure Mühen im voraus!!!!
-
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
-
Hallo Tom,
Du bist mein absoluter Held - scharfes Teil ich danke unendlich - aber eine bitte hätte ich noch:
Ich hab doch den Form-Aufruf:
<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>Wie bekomme ich den Aufruf mit dem php in mein bestehendes Formular mit dem Formularmailer, da ich ja nicht in den Form noch einen Form befehl einbringen kann.
Mein Formularmailer schaut so aus:
<FORM METHOD="POST" ACTION="/cgi-bin/mastermail.pl">So, hier jetzt Deinen Java:
<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></FORM>
...und so kann es ja nicht funktionieren. Ich hab einen Form Befehl im anderen und dadurch kann ich die Selektierten Daten nicht per Mail versenden.
Bitte nochmal um Deine Hilfe - Danke!!!!!!
-
Hi Benjamin,
folgendes:
<form name="formCarSelctor" method="post" action="/cgi-bin/mastermail.pl">
<p id="cars"><script type="text/javascript">WriteCarsSelect();</script></p>
<p id="types"></p>
<p id="colors"></p>
</form>mehr nich. So sollte es eigentlich funktionieren
Gruß von Tom C
P.S.: Ein "!" pro Posting reicht ;-)
-
-