• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Je nach select Div einblenden / ausblenden

G

Genusstaucher

New member
Hallo Forum,
greift einem Newbie bitte unter die Arme. Ich werde noch zum Hirsch...Was will ich? Ich habe eine selct-Box mit 5 Einträgen. Je nach Select soll ein Div ein- bzw. ausgeblendet werden. Der script (s.u.) funktioniert aber nur 1 x. er setzt sich nie zurück... Was muss ich zurücksetzen, damit der script mehrfach funktioniert?
Kompliziert ausgedrückt? Einfach script in ein leeres html-Doku rein und select Boxen auswählen...

HTML: 
<!DOCTYPE HTML>
<html>
<head>
    
<script language="javascript">
        function setVisibility()
        {
            var val = document.getElementById('Datenbank_id').value;
            divandere_dbs = document.getElementById('andere_DBs');
            divgedenktag_DB = document.getElementById('gedenktag_DB');

            if (val == 'gedenktage') 
            {
                divgedenktag_DB.style.display='block';
            }
            else 
            {
                divandere_dbs.style.display = 'block';
            }
        }
</script>    
    
</head>

<body>

<form action="" method="post">
	<select name="Datenbank" id="Datenbank_id" class="validate-select" title="Datenbank" onchange="setVisibility();">
        <option selected> - Bitte auswählen - </option>
        <option value="gedenktage">Gedenktag Datenbank</option>
        <option value="_swr">SWR-Datenbanken</option>
        <option value="sixties">Die Sixties Dokumentation</option>
        <option value="hoty_ges">Die Hits of the Year</option>
        <option value="_kommerziell">Kommerzielle DBs</option>
    </select>
</form>

<div id="gedenktag_DB" style="display: none">
    Künstler: <input name="Künstler" size="30" type="text" />
    Datum: <input name="Datum" size="30" type="text" />
</div>

		
<div id="andere_DBs" style="display: none">
    Interpret: <input name="Interpret" size="30" type="text" />
    Titel: <input name="Titel" size="30" type="text" />
    Jahr: <input name="Jahr" size="30" type="text" />
</div>

</body>
</htm
l>
 
Zuletzt bearbeitet von einem Moderator:
Du musst das display natürlich auch wieder auf "none" setzen, wenn der Wert nicht mehr der gewünschte ist:
Code: 
<!DOCTYPE HTML>
<html>
<head>
	<title>Select test</title>
	<script>
	function setVisibility(select){
		var val = select.value;
		document.getElementById('andere_DBs').style.display = (val === 'gedenktage'? "block": "none");
		document.getElementById('gedenktag_DB').style.display = (val !== 'gedenktage'? "block": "none");
	}
	</script>
</head>
<body>

	<select name="Datenbank" id="Datenbank_id" class="validate-select" title="Datenbank" onchange="setVisibility(this);">
		<option selected> - Bitte auswählen - </option>
		<option value="gedenktage">Gedenktag Datenbank</option>
		<option value="_swr">SWR-Datenbanken</option>
		<option value="sixties">Die Sixties Dokumentation</option>
		<option value="hoty_ges">Die Hits of the Year</option>
		<option value="_kommerziell">Kommerzielle DBs</option>
	</select>

	<div id="gedenktag_DB" style="display: none">
		Künstler: <input name="Künstler" size="30" type="text" />
		Datum: <input name="Datum" size="30" type="text" />
	</div>


	<div id="andere_DBs" style="display: none">
		Interpret: <input name="Interpret" size="30" type="text" />
		Titel: <input name="Titel" size="30" type="text" />
		Jahr: <input name="Jahr" size="30" type="text" />
	</div>

</body>
</html>

PS: Ich hab' mal alles Überflüssige entfernt...
 
Ja, wie geil ist das denn? :) Das geht ja ;) Vielen herzlichen Dank! Heute Abend werde ich mir das mal genüsslich reinziehen, um die Abhängigkeiten zu erkennen und zu lernen :) dann kann ich so etwas in Zukunft alleine :) Nochmals Danke!
Wie setzt man den "Fred" jetzt auf gelöst? Ich guck mal...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben