Don P: Drop-Down-Liste aus JavaScript heraus anpassen

Beitrag lesen

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