create multiple element select

  • Hi,

    habe mal ein kurze Frage. Und zwar versuche ich mit create Element mehrere Selects mit Inhalt(options) zu füllen.

    irgendwie wird aber jedesmal nur das letzte select gefüllt an dem ich appendChild(option) anwende.

    Kann mir jemand erklären, warum das so ist? und wie ich mehrere mit Inhalt füllen kann?

    Danke schonmal


    var selects = document.querySelector('#lists_trips');

    var selects_cont = document.querySelector('#lists_cont');
    var selects_region_macro = document.querySelector('#lists_reg_mac');
    var selects_land = document.querySelector('#lists_land');
    var selects_region_micro = document.querySelector('#lists_reg_mic');

    var ul_list_element = document.querySelector('.ul_list');
    var ul_list_continent = document.querySelector('#continents_nav');
    //console.log(ul_list_continent);
    //console.log(selects)

    window.onload = function () {
    //console.log('Dokument geladen');
    trips= output1.textContent;
    trips= JSON.parse(trips);
    //console.log(trips)
    for(let x = 0;x<trips.list_trips.length;x++){
    let option = document.createElement('option');
    if(trips.list_trips[x].list_type = "0"){
    //console.log('x')
    //console.log(x)
    //console.log(trips.list_trips[x])
    option.classList.add("style_list_trip");
    }
    else if (trips.list_trips[x].list_type = "1"){
    option.classList.add("style_list");
    }
    let tempNode =
    document.createTextNode(trips.list_trips[x].name);
    option.appendChild(tempNode);
             
                

    selects.appendChild(option);
    selects_land.appendChild(option);
    }

  • danke.


    ich würde das hier anhängen, anstatt der letzten beiden Zeilen:


    selects.appendChild(option);
              

    var cln = selects.cloneNode(true);
              
    selects_cont.appendChild(cln);


    Scheint aber noch nicht zu funktionieren.

  • Danke,

    das geht :).


    und wie kann ich jetzt ein weiteres Select mit neuem Inhalt füllen? Ich habe eine weitere onload Funktion angehängt:


    window.onload = function () {
           
        
    let optionB = document.createElement('option');
                        
    let tempNodeB =
    document.createTextNode("option1");
    optionB.appendChild(tempNodeB);
    selects_region_macro.appendChild(optionB);

    }


    Aber hier habe ich wider das gleiche Problem wie vorher, dass nur das letzte Select gefüllt wird.

  • Zitat

    Ich habe eine weitere onload Funktion angehängt:


    window.onload = function () {

    Hier ist wahrscheinlich das Problem, dass Du mit dieser Anweisung die Funktion, die Du zuvor angehängt hast, überschreibst.

    Lösung: Alles in einer einzigen Funktion erledigen. Oder beide Funktionen mit addEventListener registrieren, hier ist das "add" wortwörtlich zu verstehen, die Funktion wird hinzu gefügt und überschreibt die vorige nicht.