Javascript ist Toll!

13. April 2007 - 11:50

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

  • 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...

  • 15. Juni 2012 -- Wordpress und Javascript (2)

    In der letzten Zeit durfte ich mich etwas intensiver...

Comments (9)
1751 mal gelesen.

9 Kommentare

Leave a comment »

Seiten:

1. Kommentar von: Axel
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

2. Pingback von: Auswahlfenster bzw. Combobox - Javascript & Ajax @ tutorials.de: Forum, Tutorial, Anleitung, Schulung & Hilfe
19. Dezember 2008: 18:19

[…] Auswahlfenster bzw. Combobox So etwas gibt es. Schau mal bei http://javascript.jstruebig.de/javascript/68/#more-68 __________________ Gru

3. Kommentar von: zeroTM
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

4. Kommentar von: Struppi
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

5. Kommentar von: Don P
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

6. Kommentar von: Struppi
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.

7. Kommentar von: Struppi
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?

8. Kommentar von: Don P
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…

9. Kommentar von: Struppi
15. März 2011: 18:46

Andere Frameworks z.b. ext.js bauen die Combobox komplett mit JS, das ist natürlich etwas anderes.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful