[JavaScript] Selectbox dynamisch erweitern

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    [JavaScript] Selectbox dynamisch erweitern

    Hallöchen.

    Ich habe hier dieses kleine Script:

    Code:
    <html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
    tmpNode = objButton.form.elements[0].parentNode.cloneNode(true);
    objButton.form.insertBefore(tmpNode,objButton);
}
//-->

function remove(objLink)
{
    objLink.parentNode.parentNode.removeChild(objLink.parentNode);
}
//-->
</script>
</head>
<body>
<form>
 <div>
    <select name="input[]" id="box">
      <option value="1">1</option>
      <option value="2">2</option>
    </select> <a href="#" onClick="remove(this);">Remove</a>
</div>
<input type="button" name="button" value="ADD" onClick="clone_this(this);">

</form>
</body>
</html>
    Nun habe ich aber das Problem, dass bei der ersten angezeigten Selectbox auch der Remove Link ist, der soll aber bei der ersten Selectbox nicht stehen, nur bei denen, die neu angelegt werden.

    Achja, was evtl. auch noch besser wäre, wenn ich nur einen Button mit hinzufügen und einen mit entfernen habe.

    Das nächste Problem was aufgetaucht ist, ist wenn ich mit PHP die Selectbox mit Daten fülle. Das funktioniert soweit ganz gut. Nur wenn ich ne zweite Selectbox mit anderen Daten erzeuge und diese im gleichen Form steckt, so wird nur die erste Selectbox geklont.

    Mal nen kleines Codebeispiel:

    Code:
    <html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
    tmpNode = objButton.form.elements[0].parentNode.cloneNode(true);
    objButton.form.insertBefore(tmpNode,objButton);
}
//-->

function remove(objLink)
{
    objLink.parentNode.parentNode.removeChild(objLink.parentNode);
}
//-->
</script>
</head>
<body>
<form>
 <div>
    <select name="input[]" id="box">
      <option value="1">1</option>
      <option value="2">2</option>
    </select> <a href="#" onClick="remove(this);">Remove</a>
</div>
<input type="button" name="button" value="ADD" onClick="clone_this(this);">

 <div>
    <select name="output[]" id="box">
      <option value="1">Hallo</option>
      <option value="2">Welt</option>
    </select> <a href="#" onClick="remove(this);">Remove</a>
</div>
<input type="button" name="button" value="ADD" onClick="clone_this(this);">
</form>
</body>
</html>
    Wenn ich jetzt auf den Button ADD der zweiten Selectbox klicke, dann wird die erste Selectbox geklont und unter die zweite Selectbox gehängt.

    Könnte mir da jemand weiterhelfen? Oder mir das Script so modifizieren? Ich habe sogut wie keine Ahnung von JavaScript und fand das schon schwer genug ^^
    Stichworte: -
  • #2
    Code:
    <html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton,objid, objname){
    newobj = document.getElementById(objid).firstChild;
    while(newobj.nodeName != "DIV"){
     newobj = newobj.nextSibling;
    }
    tmpNode = newobj.cloneNode(true);
    newselect = tmpNode.firstChild;
    while(newselect.nodeName != "SELECT"){
     newselect = newselect.nextSibling;
    }
    newselect.setAttribute("name", objname);
    objButton.form.insertBefore(tmpNode,objButton);
}

function remove(objLink){
    objLink.parentNode.parentNode.removeChild(objLink.parentNode);
}
//-->
</script>
</head>
<body>
<form>

<!-- DIVS TO COPY START -->
<div style="display:none;" id="input">
 <div>
 <select>
      <option value="1">1</option>
      <option value="2">2</option>
 </select> <a href="#" onClick="remove(this);">Remove</a>
 </div>
</div>
<div style="display:none;" id="output">
 <div>
 <select name="output[]">
      <option value="1">Hallo</option>
      <option value="2">Welt</option>
 </select> <a href="#" onClick="remove(this);">Remove</a>
 </div>
</div>
<!-- DIVS TO COPY END -->

<div>
    <select name="input[]">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
</div>
<input type="button" name="button" value="ADD" onClick="clone_this(this,'input','input[]');">

<div>
    <select name="output[]">
      <option value="1">Hallo</option>
      <option value="2">Welt</option>
    </select>
</div>
<input type="button" name="button" value="ADD" onClick="clone_this(this,'output','output[]');">
</form>
</body>
</html>
    Hier mal ein Ansatz... Den Rest wirst du wohl selber schaffen

    Kommentar

    Vorherige template Weiter
    Lädt...
    X