Drop-Down-Liste aus JavaScript heraus anpassen

[Robert]

Hallo,

meine HTML-Seite hat zwei Drop-Down-Felder. Das erste Drop-Down-Feld sieht so aus:

<select name="Auswahl" size="1" onchange="CheckAuswahl(this);">
   <option value="w1">Wert1</option>
   <option value="w2">Wert2</option>
</select>

Es ist zu sehen, das nach einer Änderung im ersten Drop-Down-Feld die JavaScript-Funktion "CheckAuswahl" aufgerufen wird. Die JavaScript-Funktion ruft eine JSP auf. Die JSP wiederrum ruft eine Java-Funktion auf, die mir die Inhalte für das zweite Drop-Down-Feld zurückgibt. Des weiteren enthält die JSP eine JavaScript Funktion mit deren Hilfe ich mir die Werte die in das zweite Drop-Down-Feld eingetragen werden sollen besorgen kann. In der Java-Script-Funktion unten habe ich jetzt ein String-Array, welches die in der zweiten Drop-Down-Liste einzutragenden Werte enthält.

<script type="text/javascript">
    function CheckAuswahl(select)
    {
        // über einen JSP die wiederrum eine Java-Funktion aufruft
        // besorge ich mir die Werte, die in die zweite Auswahlliste
        // geschrieben werden sollen. Die Werte liegen mir jetzt in
        // Form eines String-Arrays hier vor. Die Werte sollen in das
        // zweite Drop-Down-Feld gesetzt werden.
    }
</script>

Nun zu meiner Frage:

Wie kann ich innerhalb einer JavaScript-Funktion Werte in eine Drop-Down-Liste hinzufügen bzw. Werte in einer Drop-Down-Liste löschen?

[trinni]

Hi

Wie kann ich innerhalb einer JavaScript-Funktion Werte in eine Drop-Down-Liste hinzufügen bzw. Werte in einer Drop-Down-Liste löschen?

Das geht mit document.createElement(), document.createAttribute() und appendChild().

Da du schon Elemente statisch darin stehen hast, kannst du diese entweder komplett löschen (removeChild()), aber damit kannst du das Element nicht mehr wiederholen.
Deshalb empfehle ich dir die Variante mit CSS:

  
document.getElementById(ElementID).lastChild.style.display="none";  

MfG
trinni

[Robert]

Kannst du mir vielleicht ein kleines konkretes Codebeispiel geben. Das wäre sehr nett.

[trinni]

Hi

Kannst du mir vielleicht ein kleines konkretes Codebeispiel geben. Das wäre sehr nett.

Steht doch alles in den Codebeispielen, die musst du dir nur noch zurechtschneiden.
Heißt hier ja nicht umsonst SELFhtml ;)

MfG
trinni

[Don P]

Hallo,

Kannst du mir vielleicht ein kleines konkretes Codebeispiel geben. Das wäre sehr nett.

Mal sehen...

meine HTML-Seite hat zwei Drop-Down-Felder. Das erste Drop-Down-Feld sieht so aus:

<select name="Auswahl" size="1" onchange="CheckAuswahl(this);">
   <option value="w1">Wert1</option>
   <option value="w2">Wert2</option>
</select>

  
Sieht aber nicht so gut aus. Das HTML-Element sollte eine eindeutige id bekommen, damit man es später leichter ansprechen kann:  
  
~~~javascript
  
<select name="Auswahl1" id="ErstesDropDownFeld" size="1" onchange="CheckAuswahl(this);">  
   <option value="w1">Wert1</option>  
   <option value="w2">Wert2</option>  
</select>

Und das zweite Drop-Down-Feld sähe dann z.B. leer aus:

  
<select name="Auswahl2" id="ZweitesDropDownFeld">  
   <option></option>  
</select>

In der Java-Script-Funktion unten habe ich jetzt ein String-Array, welches die in der zweiten Drop-Down-Liste einzutragenden Werte enthält.

  
    function CheckAuswahl(select)  
    {  
        // über einen JSP die wiederrum eine Java-Funktion aufruft  
        // besorge ich mir die Werte, die in die zweite Auswahlliste  
        // geschrieben werden sollen. Die Werte liegen mir jetzt in  
        // Form eines String-Arrays hier vor.  
  
        // Nennen wir es mal stringArray  
  
        // Die Werte sollen in das zweite Drop-Down-Feld gesetzt werden.  
        // werden.  
  
        // z.B. so:  
        var zweitesElementObjekt = document.getElementById("ZweitesDropDownFeld");  
  
        // Wir leeren das DropDown-Feld es erst mal komplett:  
        zweitesElementObjekt.options.length = 0;  
  
        // Und füllen es dann mit neuen Einträgen gemäß den Arraywerten:  
        for (var arrayIndex = 0; arrayIndex < stringArray.length; arrayIndex += 1)  
        }  
            var auswahlText = auswahlWert = stringArray[arrayIndex];  
            zweitesElementObjekt.options[zweitesElementObjekt.options.length] = new Option(auswahlText, auswahlWert);  
        }  
    }

Gruß, Don P