✔ Dynamische Combofeldliste mit rücksetzfunktion

MSJones

MSJones

Grünschnabel
Hallo.
Ich bin dabei, eine Liste von Combofeldern zu machen, die sich automatisch nach Auswahl eines Wertes erweitert. Hinter dem Combofeld soll jeweils ein Button stehen, mit dem man den Wert wieder auf einen Defaultwert zurücksetzten kann.

Die Comboboxen und die Erweiterung um weitere Boxen ist kein Problem.
Der Button wird auch schon gesetzt.
Nur machen die neu erstellten Buttons Probleme bei der onclick Funktion. Mit anderen Worten, es scheint keine Funktion ausgeführt zu werden.
Hier mal mein Quellcode:
HTML: 
<html>
<head>
<script type="text/javascript">
    function geaendert(divname, lastdiv, comboname, buttonName)
    {
        aktAnzahl = document.getElementsByName(comboname).length;
        ndiv = document.getElementById(divname);
        ldiv = document.getElementById(lastdiv);
        ndiv.outerHTML = ldiv.outerHTML + ndiv.outerHTML;
        document.getElementsByName(comboname)[aktAnzahl-1].onchange='';
        document.getElementsByName(comboname)[aktAnzahl].options[0].selected = true;
        ldiv.id = '';
        document.getElementsByName(buttonName)[aktAnzahl].onclick = 'document.getElementsByName("'+comboname+'")['+aktAnzahl+'].options[0].selected = true;';
        alert(document.getElementsByName(buttonName)[aktAnzahl].onclick);
    }
</script>
</head>
<body>
<div id='lastCombo'>
    <select name="combo[]" onchange="geaendert('newCombo', 'lastCombo', 'combo[]', 'lastButton');">
        <option value='0'>---</option>
        <option value='1'>1</option>
        <option value='2'>2</option>
    </select>
    <button name='lastButton' onclick='document.getElementsByName("combo[]")[0].options[0].selected = true;'>delete</button>
</div>
<div id='newCombo'></div>
</body>
</html>
Weiteres Problem, ist aber erst mal nicht so wichtig, das Skript scheint im Firefox ganz abzuloosen. Da funktioniert nicht mal die Erweiterung um neue Comboboxen. Wenn mir das vielleicht auch noch jemand erklären könnte, woran das liegt, wär ich sehr dankbar.
 
OK, dummer fehler mit dem onclick.
Muss natürlich wie folgt heißen:
HTML: 
document.getElementsByName(buttonName)[aktAnzahl].onclick = new Function('document.getElementsByName("'+comboname+'")['+aktAnzahl+'].options[0].selected = true;');

Erklärt aber immer noch nicht, warum das nicht im FF fuktioniert.
 
Moin,

outerHTML ist etwas, was du aus deinem Wortschatz streichen solltest, das kennt nur der IE.

verwende stattdessen die DOM-Methoden cloneNode() und appendChild()
 
So, hab mich an deine Vorgaben gehalten und das ganze ein wenig abgeändert.
Sieht dann jetzt so aus:
HTML: 
<html>
<head>
<script type="text/javascript">
    function geaendert(outerdivname, innerdivname, comboname, buttonname)
    {
        aktAnzahl = document.getElementsByName(comboname).length;
        outerdiv = document.getElementById(outerdivname);
        innerdiv = document.getElementById(innerdivname);
        innerdiv2 = innerdiv.cloneNode(true);
        outerdiv.appendChild(innerdiv2);
        document.getElementsByName(comboname)[aktAnzahl-1].onchange='';
        document.getElementsByName(comboname)[aktAnzahl].options[0].selected = true;
        innerdiv.id = innerdiv.id + aktAnzahl;
        document.getElementsByName(buttonname)[aktAnzahl].onclick = new Function('document.getElementsByName("'+comboname+'")['+aktAnzahl+'].options[0].selected = true;');
    }
</script>
</head>
<body>
<div id='Combo'>
<div id='lastCombo'>
    <select name="combo[]" onchange="geaendert('Combo', 'lastCombo', 'combo[]', 'lastButton');">
        <option value='0'>---</option>
        <option value='1'>1</option>
        <option value='2'>2</option>
    </select>
    <button name='lastButton' onclick='document.getElementsByName("combo[]")[0].options[0].selected = true;'>delete</button>
</div>
</div>
</body>
</html>
Vielen Dank für die Hilfe.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück