Javascript Combobox
eine Combobox kombiniert ein Eingabefeld mit einer Auswahliste, da es kein HTML Element für eine Combobox gibt, muss diese mit Javascript nachgestellt werden. Hier ist eine Möglichkeit
Das Skript macht aus allen Auswahlisten, die das Wort combobox im Klassennamen haben, ein Eingabefeld mit einer Liste.
Der Aufruf sollte nach dem laden oder hinter dem letzten Formular im Dokument erfolgen, da die Funktion createCombobox()
alle Formularfelder aller Formulare einer Seite durchsucht.
Die Combobox ist zuerst ein Inputfeld, mit einem Knopf oder Pfeil für die Auswahlliste. Man kann nun entweder in das Inputfeld einen Wert eingeben oder einen aus der Liste, dieser läßt sich dann auch ändern. Abgeschickt wird immer der Wert, der in dem Inputfeld steht.
Beispiel
Download
Das Skript findet sich hier und hier
eine Beispielseite.
Getestet habe ich mit dem (IE6), Opera 9, FF 2 und IE 7
Anmerkung EDIT: 14.7.2007
Dieser bescheuerte IE 6!
Der IE ist wieder eingebaut, ich bin dem Bug auf der Spur, die Beispielseite funktioniert auch im IE, hier schlägt irgendein CSS Bug zu, den ich noch nicht geordet habe.
Der IE hat Probleme eine Auswahliste mit einem anderen Element zu verdecken (siehe hier) .
ähnliche Artikel
- 6. August 2019 -- CAS Nummer validieren (0)
Wieder ein kleines Skript aus dem Bereich Chemie. Um...
- 27. Oktober 2012 -- Tween Beispiele (0)
Das Tween Objekt Ich vertiefe hier noch einmal die...
- 22. Juni 2012 -- Tween(2) (0)
Die Technik um mit Javascript eine Bewegung zu animieren...
6681 mal gelesen.
9 Kommentare
Leave a comment »
Seiten:
23. Juni 2007: 1:18
Hi J.,
auf den ersten Blick ist das echt ein tolles Skript. Du hast so einige Skripte auf Deiner Seite, mit denen man durchaus was anfangen könnte.
Ich habe ein Google-Suchfeld auf meiner Seite, das ich zur ComboBox aufrüsten werde. Ginge das?
Gruß,
Axel
19. Dezember 2008: 18:19
[…] Auswahlfenster bzw. Combobox So etwas gibt es. Schau mal bei http://javascript.jstruebig.de/javascript/68/#more-68 __________________ Gru
20. Dezember 2009: 14:16
hi,
sehr nützliches script, danke.
das was mir noch dabei fehlen würde ist eine multiauswahl mit strg.
mfg
zeroTM
20. Dezember 2009: 14:23
In einer Combobox? Soweit ich das Element kenne, gibt’s das auch in echten Comboboxen nicht: http://de.wikipedia.org/wiki/Combobox
6. März 2011: 16:28
Diese Combobox sieht ganz gut aus, solange die Darstellungsgröße im Browser auf ’normal‘ steht.
Wenn man aber im z.B. im FireFox oder Opera mit Crtl+ oder Ctrl- oder im IE über Ansicht->Zoom die Größe ändert, passt es nicht mehr. Kann ich so leider nicht brauchen.
Gruß, Don P
7. März 2011: 18:46
Du hast recht, dass ist ein Problem, aber nur mit dem CSS hier im Blog. Auf der Testseite funktioniert es. Waran das liegt habe ich bisher nicht rausgefunden.
9. März 2011: 13:44
Ein paar Test später….
Im IE kannst du auch normale Auswahlisten nicht vernünftig vergrößern, da er die Größe des select Elements nicht ändert. Im gegensatz dazu, ändern im Firefox die Inputelemente, die mein Skript dynamisch hinzufügt, nicht ihre Position.
Aber heißt das jetzt, du kannst Auswahlisten an sich nicht brauchen, da sie sich im IE nicht zoomen lassen?
15. März 2011: 17:50
Naja, ich bin seit langem auf der Suche nach so einer Combobox und habe mir auch selber mal eine gebastelt, mit der ich aber auch nicht ganz zufrieden bin. Im Grunde habe ich gleiche Problem mit dem Zoom.
Es funktioniert zwar ein bisschen besser als hier, d.h. das TextFeld und das Dropdown zommen fast ganz korrekt im FF und Opera, aber den IE hab‘ ich gar nicht erst getestet.
Da es sich in meinem speziellen Fall um eine Web-Anwendung handelt, die ohne JavaScript gar nicht und mit JS nur im FireFox läuft, kann ich aber damit leben.
Man kann es auch irgendwie sauber hinbekommen. Das weiß ich von kommerziellen Anbietern und auch von ASP.Net, die browserübergreifend solche Comboboxen im Programm haben. Aber vermutlich wird es dann recht kompliziert mit Browserweichen und allen möglichen Tricks…
15. März 2011: 18:46
Andere Frameworks z.b. ext.js bauen die Combobox komplett mit JS, das ist natürlich etwas anderes.
Das Neuste
Kategorien
am meisten gelesen
zuletzt kommentiert
Archiv
Wortwolke
LED OOP prototype Wordpress Bugs about:config LED Scroller google linux Tool String Javascript Drag&Drop Browser Privatsphäre Firefox Animation Datenschutz Laufschrift überwachung