✔ <DIV>s ein- und ausblenden je nachdem welche OPTION einer SELECT-Box ausgewählt ist

H

HeinerK

Erfahrenes Mitglied
Hi!

Ich habe eine SELECT-Box, wie diese hier:
HTML: 
<select size="1" name="name1">
	<option value="wert1" selected>Name 1</option>
	<option value="wert2">Name 2</option>
</select>


Zu den einzelnen Optionen gibt's dann noch zusätzliche Informationen:
HTML: 
<div id="info_wert1">Wert1 bietet sich an bei...</div>
<div id="info_wert2">Wert2 bietet sich an bei...</div>


Nun möchte ich die Seite nicht mit allen Informationstexten überladen, sondern es sollen nur die DIVs angezeigt werden, deren OPTION auch gerade ausgewählt ist. Das Ein- und Ausblenden scheint ja zu gehen mit:
Code: 
document.all.deineID.style.visibility="visible";
document.all.deineID.style.visibility="hidden";

Wie würdet ihr das lösen?


Heiner
 
Hi,

vorausgesetzt, die IDs der DIVs und die Werte (value) der Optionen sind so gewählt wie in deinem Beispiel, wäre folgende Vorgehensweise möglich.

Im onchange-Event des Selektfeldes werden das Objekt selbst sowie der Index der gewählten Option einer Funktion als Parameter übergeben. Innerhalb der Routine werden alle Optionen der Selektgruppe durchlaufen und geprüft, ob es sich um die aktuelle Auswahl handelt oder nicht. Im Erfolgfall wird das DIV eingeblenden, sonst versteckt.

Beispiel:
Code: 
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1">
<script type="text/javascript">
  <!--
function toggleDiv(objSel, intSelIndex){
  // Alle DIVs durchlaufen und ein-/ausblenden
  for(var i=0; i<objSel.options.length; i++){
    document.getElementById("info_"+objSel.options[i].value).style.visibility = (objSel.options[i].value==objSel.options[intSelIndex].value)? "visible" : "hidden";
  }
}
 //-->
</script>
</head>
<body>
<select size="1" name="name1" onchange="toggleDiv(this, selectedIndex);">
  <option value="wert1" selected>Name 1</option>
  <option value="wert2">Name 2</option>
</select>

<div id="info_wert1">Wert1 bietet sich an bei...</div>
<div style="visibility: hidden;" id="info_wert2">Wert2 bietet sich an bei...</div>
</body>
</html>

Ciao
Quaese
 
Nach langem googlen bin ich auf diese Lösung gestoßen. Eine echt tolle Lösung, hat mir weitergeholfen. Nun hab ich allerdings ein kleines Problem wo ich nicht weiter komme.

Beim absenden werden nun die zugehörenden Inhalte der 2 Selectboxen abgesendet, durch eine Routine ausgewertet und kehrt zur gleichen Seite zurück. Soweit so gut. Nun werden die vorher gesendeten Daten ausgewertet und ein 'selected' eingefügt wenn diese Auswahl vorher getroffen wurde.

Leider wird dieser Script der die divs ein oder ausblendet nur ausgeführt wenn der erste Wert geändert wird. Bekommt man es auch hin das dieser Script beim Laden der Seite durchlaufen wird?

Ich denk das geht mit dem onload='' im body-Tag. AAAAAAAAber welche Werte muss ich dort mit übergeben? Also womit ersetze ich in der Klammer "toggleDiv(this, selectedIndex)" die zwei angaben? geht es überhaupt auf diese Art oder hat jemand eine Andere Lösung?
 
Zuletzt bearbeitet:
Hi,

du könntest das Select-Feld im onload-Event des Dokumentes durchlaufen, testen, welche Option gesetzt ist und die Funktion mit den entsprechenden Parametern aufrufen.

Vorausgesetzt das Select-Feld besitzt die ID selId, könntest du folgende Routine für en onload-Event nutzen:
Code: 
window.onload = function(){
  var objSel = document.getElementById("selId");
  for(var i=0, iLen=objSel.length; i<iLen; i++){
    if(objSel.options[i].selected){
      toggleDiv(objSel, i);
      return;
    }
  }
}
Ciao
Quaese
 
Hey. DAAAAAAAAAAAAAANKE! Genau das was ich gesucht habe. Vielen vielen Dank. Hab ich auch wieder einiges dazugelernt...
 
Quaese hat gesagt.:
Hi,

du könntest das Select-Feld im onload-Event des Dokumentes durchlaufen, testen, welche Option gesetzt ist und die Funktion mit den entsprechenden Parametern aufrufen.

Vorausgesetzt das Select-Feld besitzt die ID selId, könntest du folgende Routine für en onload-Event nutzen:
Code: 
window.onload = function(){
  var objSel = document.getElementById("selId");
  for(var i=0, iLen=objSel.length; i<iLen; i++){
    if(objSel.options[i].selected){
      toggleDiv(objSel, i);
      return;
    }
  }
}
Ciao
Quaese
Zum Vergrößern anklicken....


Hey bin seid langem auch mal wieder da. Und bring auch gleich ne neue Frage mit!

So die ganze Geschichte mit den divs klappt ganz gut. Naja solange es nur 2 sind. Ich hab nun ein formular gebastelt welches 3 Stufen hat. nun hab ich allerdings das Problem das es wenn ich in der ersten Stufe den wert nachträglich ändere, sich zwar der div in der zweiten ausblendet, aber die dritte stufe nun nicht geändert oder angepasst wird.

ich hab versucht mit onclick und einer zusätzlichen funktion nun die ausgeblendete select-box auf wert 0 zu setzen aber das scheint nicht zu funktionieren, meine java kenntnisse sind auch nicht so besonders...

vielleicht hat jemand eine lösung parat.

Bedanke mich schonmal ...

hier mal dieses Formular: http://www.mybigplace.de/start/vorlagen/anfrage_2.php
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück