display van div afhankelijk van <option>

Status
Niet open voor verdere reacties.
R

RobMan

Gebruiker
Lid geworden
3 okt 2007
Berichten
126
Hoi!

Ik ben een klein beetje bezig met JavaScript, niet veel bijzonders maar ik loop vast.
Dit is wat ik nu heb:
HTML: 
<form>
<select>  <option>Maak uw keuze...</option>
               <option onClick="document.all.eerste.style.display='inline'">eerste optie</option>
		<option onClick="document.all.tweede.style.display='inline'">tweede optie</option>
</select>
</form>

<div style="display:none" id="eerste">eerste optie</div>
<div style="display:none" id="tweede">tweede optie</div>
De divs worden nu wel zichtbaar als de bezoeker een optie kiest maar hoe worden ze weer onzichtbaar (dus style="display:inline" wordt style="display:none")?
Met onBlur lukt niet zoals onderstaand:
HTML: 
<form>
<select>  <option>Maak uw keuze...</option>
               <option onClick="document.all.eerste.style.display='inline'" onBlur="document.all.eerste.style.display='none'">eerste optie</option>
		<option onClick="document.all.tweede.style.display='inline'" onBlur="document.all.tweede.style.display='none">tweede optie</option>
</select>
</form>

<div style="display:none" id="eerste">eerste optie</div>
<div style="display:none" id="tweede">tweede optie</div>
of klopt er iets niet in bovenstaande? Of waar moet ik anders kijken?
 
Code: 
<html>
<head>
<script type="text/javascript">
var previousId = null;

function show(object) {
  var id = object.options[object.selectedIndex].value;
  id = document.getElementById(id);
  if(previousId != null) {
    previousId.style.display = (previousId.style.display == 'none' ? '' : 'none');
  }    
  previousId = id;
  id.style.display = (id.style.display == 'none' ? '' : 'none');
}
</script>
</head>

<body>
<form>
<select name="selectIt" onChange="show(this.form.selectIt)"> 
 <option>Maak uw keuze...</option>
  <option value="eerste">eerste optie</option>
  <option value="tweede">tweede optie</option>
</select>
</form>

<div style="display:none" id="eerste">eerste optie</div>
<div style="display:none" id="tweede">tweede optie</div>
</body>
</html>

Volgens mij werkt hij zoals je wilt.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan