nicht angemeldet
Echtes Dropdown-Menü mit Javascript oder PHP?
Hallo!
ich siche nach einer Möglichkeit, dass ich per Knopfdruck Werte von der einen Auswahl-Liste in eine andere übertragen kann, die dann hinterher beim Abschicken des Formulars di entscheidenen Werte enthält.
1. Müssen beide Listen im Formular stehen?
Ich habe das mal wie folgt probiert, hier mal die ganze Seite:
<head>
<script type="text/javascript">
<!--
function add() {
document.form.sel2.value = document.form.sel1.value;
}
//-->
</script>
</head>
<body>
<form name="form" method="post" action="">
<select name="sel1" size="5" multiple>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
</select>
<input type="button" name="add" value="hinzufügen" onClick="add()">
<input type="button" name="del" value="löschen">
<select name="sel2" size="5" multiple>
</select>
</form>
</body>
Und wenn man jetzt auf "hinzufügen" klickt, solen alles Werte aus dem sel1 Feld in das sel2 Feld übertragen werden.
2. Problem: Wie lösche ich die Werte im sel2 Feld mit Javascript?
Also ich dachte mir Javascript ist da besser, da Clientseitig, weiß nur nicht ob das überhaupt geht.
Was mache ich falsch???
Grüsse
Andreas
-
Hallo,
ich siche nach einer Möglichkeit, dass ich per Knopfdruck Werte von der einen Auswahl-Liste in eine andere übertragen kann, die dann hinterher beim Abschicken des Formulars di entscheidenen Werte enthält.
http://selfhtml.teamone.de/javascript/objekte/options.htm#neue_elemente
- Problem: Wie lösche ich die Werte im sel2 Feld mit Javascript?
Also ich dachte mir Javascript ist da besser, da Clientseitig, weiß nur nicht ob das überhaupt geht.
JavaScript, genau:
http://selfhtml.teamone.de/javascript/objekte/options.htm#elemente_loeschenGruß Markus
-
Hi!
Aber so geht es auch nicht:<head>
<script type="text/javascript">
<!--
function add() {
NeuerEintrag = new Option(document.form.alle.value,document.form.alle.value,false,true);
document.form.auswahl.options[document.form.auswahl.length] = NeuerEintrag;
document.form.alle.value = "";
}
function del() {
document.form.auswahl.options[document.form.auswahl.length-1] = null;
}//-->
</script>
</head>
<body>
<form name="form" method="post" action="">
<select name="alle" size="5" multiple>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
</select>
<input type="button" name="add" value="hinzufügen" onClick="add()">
<input type="button" name="del" value="löschen" onClick="del()">
<select name="auswahl" size="5" multiple>
<option>dfg</option>
</select>
</form>
</body>Und löschen auch nicht, aber auch bei dwer vorlage wird immer nur der letzte Eintrag aus der Lite gelöscht!
Andreas
-
Hallo,
Aber so geht es auch nicht:
jau, weil noch einige Fehler drinstecken
<head>
<script type="text/javascript">
<!--
function add() {Es gibt Namenskonfklikte, da Du auch ein Formularfeld namens add hast, benenne die Funktion in z.B. addOption um.
NeuerEintrag = new Option(document.form.alle.value,document.form.alle.value,false,true);
document.form.auswahl.options[document.form.auswahl.length] = NeuerEintrag;
document.form.alle.value = "";form ist eine JavaScript-Eigenschaft, da gibt es ebenfalls Konflikte, bennene dein Formular um in z.B. myForm, natürlich dann auch überall document.myForm... ändern
}
function del() {genau wie bei add(), umbenennen in z.B. delOption
document.form.auswahl.options[document.form.auswahl.length-1] = null;
}//-->
</script>
</head>
<body>
<form name="form" method="post" action="">Formularnamen ändern
<select name="alle" size="5" multiple>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>hier mußt Du den Einträgen einen Value zuweisen, z.B. <option value="a">a</option>
</select>
<input type="button" name="add" value="hinzufügen" onClick="add()">
<input type="button" name="del" value="löschen" onClick="del()">Funktionsnamen analog oben ändern
<select name="auswahl" size="5" multiple>
<option>dfg</option>
</select>
</form>
</body>nun sollte es funktionieren
Wenn Du die gesamte Liste löschen willst:
function delOption()
{
for(var i=document.myForm.auswahl.length;i>0;i--) {
document.myForm.auswahl.options[i-1] = null;
}
}HTH Markus
-
HI!
Danke Dir!
Funktioniert so grundsätzlich, hab aber noch ein paar kleine Probleme.
Wenn ich einen bestimmten Wert aus der Liste löschen will wird einfach immer der letzte gelöscht, und nicht der gewählte.
Außerdem werden die Werte immer doppelt übertragen, wenn ich abschicke?! Also wenn ich "c" auswähle, steht auf der Ergebnisseite "cc"?!Anders herum kann ich beim hinzufügen, wenn ich mehrere Werte gleichzeitig auswähle, wird immer nur einer übernommen. Brauche ich da eine Schleife?
Code sieht jetzt so aus:
<head>
<script type="text/javascript">
<!--
function hinzufuegen() {
NeuerEintrag = new Option(document.formular.alle.value,document.formular.alle.value,false,true);
document.formular.auswahl.options[document.formular.auswahl.length] = NeuerEintrag;
document.formular.alle.value = "";
}
function loeschen() {
document.formular.auswahl.options[document.formular.auswahl.length-1] = null;
}
function allesloeschen()
{
for(var i=document.formular.auswahl.length;i>0;i--) {
document.formular.auswahl.options[i-1] = null;
}
}//-->
</script>
</head>
<body>
<form name="formular" method="post" action="ausw.php">
<select name="alle" size="5" multiple>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<input type="button" name="add" value="hinzufügen" onClick="hinzufuegen()">
<input type="button" name="del" value="löschen" onClick="loeschen()">
<input type="button" name="del2" value="alles löschen" onClick="allesloeschen()">
<select name="auswahl" size="5" multiple>
</select>
<input type="submit" name="del22" value="abschicken">
</form>
</body>Grüsse
Andreas-
Aus Versehen habe ich den nächsten Beitrag mit meiner Lösung nicht hier hin geschrieben, hier der Link dahin:
http://forum.de.selfhtml.org/?m=21651&t=3813
Andreas
-
-
-
- Problem: Wie lösche ich die Werte im sel2 Feld mit Javascript?