Webstatt.org - Community seit 2006 - 2012 (2024?)

Select mit Options (create/remove)

user-228
23.03.2006 09:48
hallo allerseits,
brauche hilfe bei folgendem problem:

es sollen bei einem onclick event immer wieder 2 select-felder in ein div hinzugefügt werden.

vom html-quellcode soll das dann so ungefähr aussehen



<div id="zeiten">

<select size="1" name="tag[]" id="id"><option>Montag</option></select>

<select size="1" name="zeit[]" id="id"><option>12:00</option></select>

<span onclick='removeElement("id"zwinkern'>entfernen</span><br>

</div>

das soll halt nun so oft wie gewünscht ausführbar sein, es muss "id" also immer dynamisch mitgeneriert werden.
bei klick auf den span soll diese "zeile" bestehend aus den 2 select elementen wieder verschwinden.

ich finde überhaupt keinen richtigen ansatzpunkt, evtl kann mir das wer erklären oder per link nen beispiel zeigen.

bin für jeden hinweis dankbar & bedanke mich schonmal für die hilfe,
gruß user-228
Avatar user-255
23.03.2006 15:44
previousSibling() ist die Methode deiner Träume Fettes Grinsen
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
user-228
24.03.2006 07:42
huhu
hmmm jap das hatte ich mir gestern noch angeguckt - hat mich aber nicht richtig weitergebracht.

wie kann ich das möglichst komfortabel lösen?

vielen dank an user-255 soweit lächeln
gruß, user-228
Avatar user-290
24.03.2006 15:06
reicht es nicht den Krempel einfach mit innerHTML in das div einzufügen?

Die ID darf nur einmalig im html-dokument vorkommen.
Avatar user-255
24.03.2006 15:32
Hier was zum anfassen.
<script type="text/javascript">

function removeElement (b)

{

var c = document.getElementById ("zeiten"zwinkern; // container

var i = 0;

while (i<2)

{

var n = b.previousSibling; // element vor entfernen-button

if (n.nodeType == 1) i++; // nur element-knoten zaehlen, nicht aber whitespace

c.removeChild (n);

}

}

</script>



<div id="zeiten">

<select size="1" name="tag[]"><option>Montag</option></select>

<select size="1" name="zeit[]"><option>12:00</option></select>

<span onclick='removeElement(this)'>entfernen</span><br>

</div>
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
user-228
27.03.2006 14:30
huhu,
danke an dich, user-255.
hab mich dann doch für was für mich einfacheres entschieden:

http://temp.leonic.de/addelement.html

benutzt, wie von rene vorgeschlagen, innerHTML.
meine js kenntnisse sind recht bescheiden, deswegen brauche ich nochmal hilfe:

wenn ich jetzt mehrere uhrzeiten hinzufüge, dann irgendwas änder (tag und / oder zeit) und dann nochmal ne uhrzeit hinzufüg, springen alle auswahlfelder auf "Montag" und "12:00 Uhr"

woran könnte das liegen?

gruß, user-228


//edit: wenn ich das richtig sehe, tritt der fehler nur im FF auf, nicht im IE.
Avatar user-290
27.03.2006 16:06
try this one lächeln :
sicher noch ..ähm..optimierungsbedürftig. Funktioniert aber in beiden Browsern.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de-DE">

  <head>

    <title>js~</title>

      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  </head>

  <body>

    <div id="content">

<script type="text/javascript">

Tage = new Array('Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'zwinkern;

Zeiten = new Array('12:00','14:00'zwinkern;



fieldnr = 0;



function addElement2() {

// Fieldset-Definition

         Feld = document.createElement("fieldset"zwinkern;

         IdAttr = document.createAttribute("id"zwinkern;

         IdAttr.nodeValue="field_"+fieldnr;

         Feld.setAttributeNode(IdAttr);

         document.getElementById('zeiten'zwinkern.appendChild(Feld);



// Tag-Feld

         TagAuswahl = document.createElement("select"zwinkern;

          for(i=0;i<Tage.length;i++) {

          TagAuswahl.options[TagAuswahl.length] = new Option(Tage[i],Tage[i],false,false);

          }

         TagAuswahl.name="tag[]";

         Feld.appendChild(TagAuswahl);



// Zeit-Feld

         ZeitAuswahl = document.createElement("select"zwinkern;

          for(i=0;i<Zeiten.length;i++) {

          ZeitAuswahl.options[ZeitAuswahl.length] = new Option(Zeiten[i],Zeiten[i],false,false);

          }

         ZeitAuswahl.name="zeit[]";

         Feld.appendChild(ZeitAuswahl);



// Link - Entfernen

        Feld.innerHTML += "<a href=\'javascript:removeElement(\"field_"+fieldnr+"\"zwinkern\'>entfernen</a>";

fieldnr++;

}



function removeElement(SelectNum) {

        var d = document.getElementById('zeiten'zwinkern;



        var oldSelect = document.getElementById(SelectNum);

        d.removeChild(oldSelect);

}

</script>

<form action="#" method="post">

  <fieldset>

    <input type="hidden" value="0" id="theValue" />

    <p><a href="javascript:;" onclick="addElement2();">Uhrzeit hinzufügen</a></p>

    <div id="zeiten"></div>

  </fieldset>

</form>

    </div>

  </body>

</html>
user-228
27.03.2006 16:34
wunderbar - vielen dank für deine arbeit, rene!

hier nochmal für alle online zum angucken und rumspielen:
http://temp.leonic.de/addelement_2.html

gruß, user-228
user-228
30.03.2006 19:57
guten abend,
durfte grad folgendes ernüchternd feststellen:
der IE sendet die auswahl felder nicht mit!

http://temp.leonic.de/addele.php
mal zum testen - der firefox handzahm, der IE mal wieder in bestem licht.
für den code siehte 2 posts hier drüber.

gruß, user-228
Avatar user-290
30.03.2006 23:48
hmpf..dreckiger %$$§$% IE ...

naja..nich so schlimm. IE will, dass wenn man das Attribut Name für das Objekt bestimmt, dass Name großgeschrieben is. Also dacht' ich halt TagAuswahl.Name="tag[]" ...
macht aber der Firefox nicht mit Fettes Grinsen
also anstatt TagAuswahl.name=..... bzw. ZeitAuswahl.name=.. :
TagAuswahl.setAttribute("Name","tag[]"zwinkern; bzw.
ZeitAuswahl.setAttribute("Name","zeit[]"zwinkern;

hier nochmal das Javascript:



<script type="text/javascript">

Tage = new Array('Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag','Sonntag'zwinkern;

Zeiten = new Array('12:00','14:00'zwinkern;



fieldnr = 0;



function addElement2() {

        // Fieldset-Definition

        Feld = document.createElement("fieldset"zwinkern;

        IdAttr = document.createAttribute("id"zwinkern;

        IdAttr.nodeValue="field_"+fieldnr;

        Feld.setAttributeNode(IdAttr);

        document.getElementById('zeiten'zwinkern.appendChild(Feld);



        // Tag-Feld

        TagAuswahl = document.createElement("select"zwinkern;

        for(i=0;i<Tage.length;i++) {

                TagAuswahl.options[TagAuswahl.length] = new Option(Tage[i],Tage[i],false,false);

        }

        TagAuswahl.setAttribute("Name","tag[]"zwinkern;

        Feld.appendChild(TagAuswahl);



        // Zeit-Feld

        ZeitAuswahl = document.createElement("select"zwinkern;

        for(i=0;i<Zeiten.length;i++) {

                ZeitAuswahl.options[ZeitAuswahl.length] = new Option(Zeiten[i],Zeiten[i],false,false);

        }

        ZeitAuswahl.setAttribute("Name","zeit[]"zwinkern;

        Feld.appendChild(ZeitAuswahl);



        // Link - Entfernen

        Feld.innerHTML += "<a href=\'javascript:removeElement(\"field_"+fieldnr+"\"zwinkern\'>entfernen</a>";

        fieldnr++;

}



function removeElement(SelectNum) {

        var d = document.getElementById('zeiten'zwinkern;



        var oldSelect = document.getElementById(SelectNum);

        d.removeChild(oldSelect);

}

</script>


Gruß
René
user-228
31.03.2006 14:04
mein lieblingsbrowser...groß und kleinschreibung - es ist nich zu fassen.

vielen danke an dich, rene lächeln

gruß, user-228