verberg/toon tekst bij dropdown

Status
Niet open voor verdere reacties.
B

bramphp

Nieuwe gebruiker
Lid geworden
10 mei 2008
Berichten
3
Ik heb een soort script nodig dat wanneer je op een dropdown formulier iets selecteerd automatisch de desbetreffende tekst toont, ik heb op internet iets opgezocht en dit gevonden:
Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 

<script language="Javascript">
<!--
function latenzien(veld)
{

x = document.formulier.elements[veld].selectedIndex;
idee = document.formulier.selectieveld.options[x].value;
document.getElementById(idee).style.display = 'block';
}
-->
</script>

<style type="text/css">
.verborgen
{
display: none;
}
</style>
</head>
<body>
<form name="formulier">
<select name="selectieveld" onChange="latenzien(this.name)">
<option></option>
<option>Tree</option>
<option>Axes</option>
</select>

<div id="Tree" class="verborgen">
Dit moet verschijnen wanneer 'tree' is aangeduid.
</div>

<div id="Axes" class="verborgen">
Dit moet verschijnen wanneer 'Axes' is aangeduid.
</div>
</form>
</body>
</html>
Dit werkt allemaal perfect, alleen als ik op trees klik verschijnt er het gedeelte binnen de div met id tree (dat is ook de bedoeling), maar wanneer ik vervolgens op axes klikt verschijnt ook wat er binnen de div met het id axes staat. Dit hoort ook zo te zijn alleen had ik graag gehad dat trees dan weggaat.
Er mag dus maar één 'div' tegelijk verschijnen.

Ik heb dat op de volgende manieren geprobeerd maar geen ervan werkt:
Code: 
<script language="Javascript">
<!--
function latenzien(veld)
{

x = document.formulier.elements[veld].selectedIndex;
idee = document.formulier.selectieveld.options[x].value;
document.style.display = 'none';
document.getElementById(idee).style.display = 'block';
}
-->
</script>
En ook op deze manier:
Code: 
<script language="Javascript">
<!--
function latenzien(veld)
{

x = document.formulier.elements[veld].selectedIndex;
idee = document.formulier.selectieveld.options[x].value;
document.getElementById(!idee).style.display = 'block';
document.getElementById(idee).style.display = 'block';
}
-->
</script>

Maar geen ervan werkt,
ik hoop dat iemand me kan helpen,
alvast bedankt,

Bram
 
HTML: 
<html>
	<head>
		<script type="text/javascript">
			function latenzien(veld)
			{
				var x = document.formulier.elements[veld].selectedIndex;
				var idee = document.formulier.selectieveld.options[x].value;

				//verstop ze allebei weer met deze 2 regels
				document.getElementById("Tree").style.display = 'none';
				document.getElementById("Axes").style.display = 'none';

				//en zet de goede weer op het scherm
				document.getElementById(idee).style.display = 'block';
			}
		</script>
		<style type="text/css">
			.verborgen
			{
				display: none;
			}
		</style>
	</head>
	<body>
		<form name="formulier">
			<select name="selectieveld" onChange="latenzien(this.name)">
				<option></option>
				<option>Tree</option>
				<option>Axes</option>
			</select>
			<div id="Tree" class="verborgen">
				Dit moet verschijnen wanneer 'tree' is aangeduid.
			</div>
			<div id="Axes" class="verborgen">
				Dit moet verschijnen wanneer 'Axes' is aangeduid.
			</div>
		</form>
	</body>
</html>

Zoiets?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan