Dynamische Selectbox/dropdown-Menüs erzeugen

Davicito

Erfahrenes Mitglied
Hallo,
ich arbeite mich gerade in JavaScript ein und brauche mal einen Rat von Euch, in Sachen dynamische Objekterzeugung für Dropdown-Menüs.

Folgendes: Ich möchte, wenn ich in einer Selectbox eine Auswahl getroffen habe, automatisch eine weitere Selectbox erzeugen lassen, um dem Anwender die Möglichkeit zu geben, eine weitere Auswahl treffen zu können, wenn er es denn auch möchte.

dazu habe ich folgendes in JavaScript umgesetzt.
Javascript:
<script>
    function knAuswahlFeld(obj)
    {               
        if(obj.options[obj.selectedIndex].text != 0)
        {
            //alert("Bin da!"+obj.options[obj.selectedIndex].text);
            var newSelectElement = new document.createElement("select");
                                         
            document.appendChild(newSelectElement);
       }                       
        else     alert("Bin leer");
    }
</script>

Formular:
HTML:
<form name="formid" >
           <select size="1" maxlength="20" name="test" onchange="knAuswahlFeld(this)">
                <option> </option>
        <?php                   
            while($row_dat = mysql_fetch_object($result_dat))
                    {
                        echo'<option value='.$row_dat->Kunden_ID.'> '.$row_dat->Kunden.'</option>';
            }               
        ?>
         </select>           
</form>

Leider erscheint kein weiteres Auswahlmenü! Ich hab ne menge im Internet gegoogelt und bin auf keine weitere Lösung gestoßen, um das hinzubekommen. Bitte daher um Hilfe.

LG.

Keiner eine Idee?

Ich möchte doch bloß ein weitere Selectbox auf meine Seite einfügen, sobald man einen Wert in der ersten Selectbox ausgewählt hat. und so weiter.

Wenn ich an Stelle von
Javascript:
document.appendChild(newSelectElement);
, in Zeile 9 durch
Javascript:
document.body.appendChild(newSelectElement);
ersetzte, bekomme ich meine Selectboxen.
Aber wenn ich in meinem Formular eine Selectbox haben möchte, mit
Javascript:
document.getElementByName(formid).appendChild(newSelectElement);
, bekomme ich keine Selectbox hin!

Einer Eine Idee, wie das Ganze funktionieren könnte?

Ok... ich merke, dass ich evtl. meine Frage/ Problem vielleicht nicht gut formuliert habe... deshalb formuliere ich es mal anders.

Ich habe ein Formular, in dem nur eine Selectbox/Auswahliste gefüllt mit Werten steht.
Wenn ich mit onChange den Wert verändere, soll gleich unter der Selectbox eine weitere Selectbox, neu erzeugt werden, mit den gleichen Werten gefüllt, wie bei der ersten.

Wie kann ich das in Javascript umsetzten?

Mit createElement("Select") kann ich eine neue Selectbox erstellen und mit apperChild() die Selectbox anzeigen lassen. Wie bekomme ich jetzt noch die Werte in die neue Selectbox gefüllt und wie benenne ich diese dann.

Geht das nicht irgendwie mit Nodes? Ich hab keine Ahnung und stehe noch völlig im Dunkeln. Hab jetzt 3 Bücher über JacaScript durch und hab auch schon 3 Tage lang gegoogelt und finde einfach nichts über Dieses Thema.

Ein Beispiel mit einfachen Formular-Eingabefeldern habe ich gefunden.
Javascript:
<script type="text/javascript">           
function insertInputField(pname,pform)
{
     var inputField =  document.createElement("input"); //erzeugt EingabeObjekt
     //zusätzliche Definitionen an das erzeigte Element anhängen
     inputField.setAttribute("type","text"); // Definition des Eingabeobjektes
     inputField.setAttribute("name",pname);  // Definition der FeldEingabevariable z.B. name"foo"
     var br  =  document.createElement("br"); // Erzeuge ZeilenumbruchsObjekt
         document.getElementById(pform).appendChild(br); // Zeilenumbruch
         document.getElementById(pform).appendChild(inputField); //Felderzeugung
}           
</script>
HTML:
<form >
    <fieldset id="fset">
    </fieldset>
    <input type="button" value="Feld erzeugen" onclick="insertInputField('foo','fset')">
</form>
aber nach diesem Prinzip lassen sich leider keine Selectboxen erzeugen!
 
Zuletzt bearbeitet von einem Moderator:
Zurück