kostenloser Webspace werbefrei: lima-city

Multiselect Werte an 2. Multiselect übergeben

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   fabo

   fabo hat kostenlosen Webspace.

   21:43, 11.7.2012

   Hi,
   
   ich habe zwei Multiselects, die miteinander arbeiten (sollen). Wählt man ein Element im 1., soll dies in das 2. Multiselect übertragen und im 1. entfernt werden. Habe dazu schon folgendes gefunden:
   
   http://www.friedcherries.org/2007/01/15/javascript-magic-woptgroups/
   
   Dazu jedoch zwei Probleme, die ich gern beseitigen würde:
   
   1. Sobald eine Optiongroup keine Elemente enthält, soll die Optiongroup aus der jeweiligen Box verschwinden
   2. Ich möchte die Anzahl der zu übertragenden Elemente auf 10 begrenzen
   
   Jetzt die Frage: Hat wer eine Idee, wie man das umsetzen könnte? Oder gibt es sogar eine "elegantere" Lösung (ohne Framework)?
   
   Beitrag zuletzt geändert: 11.7.2012 21:44:25 von fabo

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. kgreen

   

   kgreen hat kostenlosen Webspace.

   17:12, 12.7.2012

   Hi fabo,
   
   geht es bei deinem Problem um mobile Entwicklung?
   Ich kann den Sinn bei deinem Vorhaben nicht erkennen.
   Kannst du das mit einem Beispiel erklären?
   Nimm Bananen und Äpfel, wenn Du Angst hast, dass dir dein Projekt geklaut wird.
   
   Ein paar Fragen:
   - Was passiert mit der Optiongroup in dem zweiten Select?
   - Wird diese mitgeschickt und das Element dort wieder eingeordnet?
   - Und was ist das Problem mit deinem beigefügten Link?
   
   Dein Problem wirst du komplett mit Javascript lösen können.
   Bei jedem Klick wirst du eine extra Funktion laufen lassen müssen, die sich durch dein erstes SELECT hangelt und nach leeren Optiongroups sucht, sprich wenn es keine ChildNodes mehr hat. Und dann löscht du das Element.
   
   Zudem kannst du die "begrenzte Übertragung" mit einem Counter lösen und bei 10 wird das erste SELECT auf "disable" oder "read-only" gesetzt.
   Alternativ lässt du eine weitere Funktion nach jedem Klick laufen, die die Elemente im zweiten SELECT zählt und dann bei 10 den ersten SELECT wieder abschaltet.

4. hackyourlife

   Moderator

   hackyourlife hat kostenlosen Webspace.

   12:40, 14.7.2012

   fabo schrieb:
   Hat wer eine Idee, wie man das umsetzen könnte?

   Natürlich
   Die Option-Groups verschwinden wenn sie leer sind, die Elemente werden immer richtig sortiert, ... einziger Nachteil: du musst deine Optionen in einem JavaScript-Objekt definieren, wenn du direkt HTML verwendest "pfuscht" der Browser hinein...
   
   Schau es dir einfach an: optgroup.html
   
   Wenn du hingegen dabei bleiben willst, dass die Optionen in HTML definiert sind entfällt die Sortierfunktion: optgroup-V2.html
   
   Hier lässt sich der Code leider nicht Posten:

   Dieser "Text" kann doch nun wirklich nicht als neuer Beitrag durchgehen, oder? Bitte kürze auf das Wesentliche, kopiere keine fremden Texte!

   
   
   Die Begrenzung wie viele Elemente maximal gewählt werden könne findet sich in dieser Zeile:

   <input type="button" onclick="moveOptions('available', 'selected', selectoptions, 10);" value="&gt;" />

   bzw

   <input type="button" onclick="moveOptions('available', 'selected', undefined, 10);" value="&gt;" />

   
   
   

   fabo schrieb:
   Oder gibt es sogar eine "elegantere" Lösung (ohne Framework)?

   Wo siehst du ein Framework?
5. Autor dieses Themas

   fabo

   fabo hat kostenlosen Webspace.

   13:02, 16.7.2012

   Ach Gott, das hab ich total übersehen :D Funktioniert natürlich tadellos, danke dafür. Danke auch für die Erklärung :)
   
   

   Wo siehst du ein Framework?

   
   
   Nirgendwo und das sollte auch so bleiben :D

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?