Ebenen ausblenden

[Momo]

Hallo,

ich möchte, dass wenn eine Option aus einem Select Feld ausgewählt ist, eine bestimmte Ebene angzeigt wird. Dies funktioniert auch.

Nur wenn eine Ebene ausgewählt ist, müssen alle anderen natürlich auf display:none; gestellt werden. Leider komme ich da in meinem Script nicht weiter. Kann jemand helfen?

<script language="JavaScript">
function auswahl() {
var f = document.forms[0]
if (f.test.selectedIndex==1)
  document.getElementById("us").style.display = "block";

if (f.test.selectedIndex==2)
  document.getElementById("eu").style.display = "block";

if (f.test.selectedIndex==3)
  document.getElementById("de").style.display = "block";

}
</script>
<form>
<select name="test" onchange="auswahl();">
 <option value="0" SELECTED>sel...</option>
 <option value="1">us</option>
 <option value="2">eu</option>
 <option value="3">de</option>
</select>
</form>

<div id="us" style="display:none;">test us</div>

<div id="eu" style="display:none;">test eu</div>

<div id="de" style="display:none;">test de</div>

[lina-]

moin Momo :)

Nur wenn eine Ebene ausgewählt ist, müssen alle anderen natürlich auf display:none; gestellt werden. Leider komme ich da in meinem Script nicht weiter. Kann jemand helfen?

Es reicht natürlich nicht, die ausgewählte Ebene sichtbar zu machen. Du musst auch explizit sagen, dass die anderen unsichtbar sein sollen. (ansonsten bleiben sie - einmal ausgewählt - sichtbar)

  
 <script language="JavaScript">  
 function auswahl() {  
 var f = document.forms[0]  
 if (f.test.selectedIndex==1){  
   document.getElementById("us").style.display = "block";  
   document.getElementById("eu").style.display = "none";  
   document.getElementById("de").style.display = "none";  
 }  
  [...]  
 </script>  

liebe Grüße aus Berlin
lina-

[Momo]

Hallo Lina,
dies hatte ich mir auch gedacht, nur wenn ich das bei allen dreien angeben, kommt irgendwas im Script total durcheinander und nix wird mehr richtig angezeigt :o(

Hat sonst noch jemand eine Idee?

Es reicht natürlich nicht, die ausgewählte Ebene sichtbar zu machen. Du musst auch explizit sagen, dass die anderen unsichtbar sein sollen. (ansonsten bleiben sie - einmal ausgewählt - sichtbar)

<script language="JavaScript">
function auswahl() {
var f = document.forms[0]
if (f.test.selectedIndex==1){
   document.getElementById("us").style.display = "block";
   document.getElementById("eu").style.display = "none";
   document.getElementById("de").style.display = "none";
}
  [...]
</script>

>   
> liebe Grüße aus Berlin  
> lina-

[lina-]

moin Momo :)

dies hatte ich mir auch gedacht, nur wenn ich das bei allen dreien angeben, kommt irgendwas im Script total durcheinander und nix wird mehr richtig angezeigt :o(

Hat sonst noch jemand eine Idee?

Nur eine Vermutung - aber vielleicht ist "display" dann nicht unbedingt das was du willst? Denke daran, dass es bei display keinen Platzhalter gibt (im Gegensatz zu visibility).

Was genau meinst du denn mit "nix wird mehr richtig angezeigt"?

liebe Grüße aus Berlin
lina-

[Momo]

Also wenn ich das wie o.g. mache, wird nur noch US angzeigt oder gar nix, was ich auch nicht wirklich verstehe. Ich vermute, dass die IF Schleife nicht ganz richtig ist, bzw mir dann ein ELSE fehlt.

Display ist schon die richtige Eigenschaft

Was genau meinst du denn mit "nix wird mehr richtig angezeigt"?

liebe Grüße aus Berlin
lina-

[lina-]

moin Momo :)
folgender Code tut genau das, was du dir wünscht (getestet mit IE und FF). Oder habe ich deine Anforderung falsch verstanden?

  
<script language="JavaScript">  
function auswahl() {  
var f = document.forms[0]  
 if (f.test.selectedIndex==1){  
    document.getElementById("us").style.display = "block";  
    document.getElementById("eu").style.display = "none";  
    document.getElementById("de").style.display = "none";  
 }  
 if (f.test.selectedIndex==2){  
    document.getElementById("eu").style.display = "block";  
    document.getElementById("us").style.display = "none";  
    document.getElementById("de").style.display = "none";  
 }  
 if (f.test.selectedIndex==3){  
   document.getElementById("de").style.display = "block";  
    document.getElementById("us").style.display = "none";  
    document.getElementById("eu").style.display = "none";  
 }  
}  
</script>  

[code lang=html]
<form>
<select name="test" onchange="auswahl();">
 <option value="0" SELECTED>sel...</option>
 <option value="1">us</option>
 <option value="2">eu</option>
 <option value="3">de</option>
</select>
</form>
<div id="us" style="display:none;">test us</div>
<div id="eu" style="display:none;">test eu</div>
<div id="de" style="display:none;">test de</div>
[code]
liebe Grüße aus Berlin
lina-

[Momo]

moin Momo :)
folgender Code tut genau das, was du dir wünscht (getestet mit IE und FF). Oder habe ich deine Anforderung falsch verstanden?

»

Hallo Lina,
ne genaus so wollte ich es haben. Meine Reihenfolge war anders, daran hat es wohl gelegen.

Vielen Dank für deine Hilfe

LG Momo

[Felix Riesterer]

Liebe Momo,

es geht auch kürzer. Erst alle Ebenen abschalten und dann per IF-Anweisung die jeweilige wieder einschalten. Damit sparst Du Dir nicht nur die vielen Ausschalt-Zeilen, du brauchst auch keine geschweiften Klammern mehr nach den IFs, da ja nur eine einzige Anweisung im IF-Zweig steht...

Du SOLLTEST im script-Tag das Attribut TYPE verwenden!

function auswahl() {  
var f = document.forms[0]  
document.getElementById("us").style.display = "none";  
document.getElementById("eu").style.display = "none";  
document.getElementById("de").style.display = "none";  
  
 if (f.test.selectedIndex==1) document.getElementById("us").style.display = "block";  
 if (f.test.selectedIndex==2) document.getElementById("eu").style.display = "block";  
 if (f.test.selectedIndex==3) document.getElementById("de").style.display = "block";  
}

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Momo]

Liebe Momo,

es geht auch kürzer.

Vielen Dank für den Tip ;o)