Divs per Drop-Down-Menü switchen

[Ralf Heumann]

Hallo,

sitze jetzt schon länger an folgendem Problem:
Ich möchte per Dropdownmenü verschiedene Divs darunter switchen.
Funktion:

<script language="JavaScript">
<!--
function checkOptions(fieldId) {

for(var i = 0; i < document.formDistribution.elements[0].length; i++)
  {
  if(document.formDistribution.elements[0].options[i].value == fieldId)
    {
    document.getElementById(fieldId).style.display = 'block';
    }
  else if(document.formDistribution.elements[0].options[i].value != fieldId)
    {
    document.getElementById(document.formDistribution.elements[0].options[i].value).style.display = 'none';
    }
  }
}
//-->
</script>

Unten im Body steht:

<form name="formDistribution" action="" method="post">
  <select name="international" onChange="checkOptions(this.value); return false;" style="width:400px;">
    <option value="0">-- International --</option>
    <option value="Australia">Australia</option>
    <option value="Canada">Canada</option>
    <option value="China">China</option>
    <option value="India">India</option>
    <option value="Israel">Israel</option>
    <option value="Japan">Japan</option>
    <option value="Malaysia">Malaysia</option>
    <option value="NewZealand">New Zealand</option>
    <option value="Philippines">Philippines</option>
    <option value="Singapore">Singapore</option>
    <option value="SouthAfrica">South Africa</option>
    <option value="SouthKorea">South Korea</option>
    <option value="Taiwan">Taiwan</option>
    <option value="Thailand">Thailand</option>
    <option value="USA">USA</option>
</select>
</form>

Dann ein paar DIVS die die ID-Namen der einzelnen Values tragen:

<div id="Australia" style="display: none;">
<h1>AUSTRALIA</h1>
</div>

<div id="Canada" style="display: none;">
<h1>CANADA</h1>
</div>

Wenn ich nun in der Funktion oben die Else-Abfrage weglasse so kann ich alle Divs schön einblenden, allerdings stapeln sie sich untereinander... Ich möchte aber, dass die anderen ausgeblendet werden. Die wollte ich mit einer for-Schleife lösen, die eben alle Values aus der Dropdownbox ausliest und dann checkt, welches Feld angezeigt werden soll, die anderen aber ausblendet.

es funktioniert aber nicht, wo ist der Fehler?

[wahsaga]

hi,

if(document.formDistribution.elements[0].options[i].value == fieldId)
    {
    document.getElementById(fieldId).style.display = 'block';
    }
  else if(document.formDistribution.elements[0].options[i].value != fieldId)
    {
    document.getElementById(document.formDistribution.elements[0].options[i].value).style.display = 'none';
[...]
Die wollte ich mit einer for-Schleife lösen, die eben alle Values aus der Dropdownbox ausliest und dann checkt, welches Feld angezeigt werden soll, die anderen aber ausblendet.

Wozu denn überhaupt dieses Doppel-Gemoppel?

if(bedingung1) {...}
else if(!bedingung1) {...}

ist doch eh das gleiche wie

if(bedingung1) {...}
else {...}

Überprüfe bitte erst einmal per alert(fieldId), ob dieser Parameter beim Aufruf deiner Funktion überhaupt das gewünschte enthält.

gruß,
wahsaga