Option-Felder verändern

Alice

Erfahrenes Mitglied
Hallo. :)

Ich bin gerade dabei ein paar kleine PHP-Projekte zu einem größeren Skript zusammenzuschliessen.

HTML:
<select name="form1" size="1" class="bgsec">
   <option value="A">1</option>
   <option value="B">2</option>
   <option value="C">3</option>
</select>

Nun stehe ich vor dem Problem das man am Anfang des Formular eine Option auswählen muss, welches das gesamte weitere Formular beeinflussen soll.

HTML:
<select name="master" size="1" class="bgsec">
   <option value="1">A</option>
   <option value="2">B</option>
   <option value="3">C</option>
</select>

Wenn z.B. "A" ausgewählt wird, sollen andere Optionen Ein- und Ausgeblendet werden.

HTML:
<select name="form1" size="1" class="bgsec">
   <option value="A">1</option>
   <option value="B">2</option>
   <option value="C">3</option>
</select>

Nur wie?
 
Eventuell kannst du es so lösen:

HTML:
<script language="javascript" type="text/javascript">
function auswahl(wert) {

switch (wert) {
	case "A":
			document.getElementById("A").style.display = "block";
			document.getElementById("B").style.display = "none";
			document.getElementById("C").style.display = "none";
			break;
	case "B":
			document.getElementById("A").style.display = "none";
			document.getElementById("B").style.display = "block";
			document.getElementById("C").style.display = "none";
			break;
	case "C":
			document.getElementById("A").style.display = "none";
			document.getElementById("B").style.display = "none";
			document.getElementById("C").style.display = "block";
			break;
}
}
</script>
<select name="form1" size="1" class="bgsec" onchange="auswahl(this.value);">
   <option value="A">1</option>
   <option value="B">2</option>
   <option value="C">3</option>
</select>
<div id="A" style="display: block;">
Werte für Auswahl A bzw. 1
</div>
<div id="B" style="display: none;">
Werte für Auswahl B bzw. 2
</div>
<div id="C" style="display: none;">
Werte für Auswahl C bzw. 3
</div>

Die einzelnen Optionen werden in DIV-Container geschrieben und diese mit Hilfe von CSS ausgeblendet (außer für den Wert A bzw. 1). Wird die Auswahl geändert, wird der entsprechende Container sichtbar.
 

Neue Beiträge

Zurück