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. October 2012 -- Tween Beispiele (0)

    Das Tween Objekt Ich vertiefe hier noch einmal die...

  • 22. June 2012 -- Tween(2) (0)

    Die Technik um mit Javascript eine Bewegung zu animieren...

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

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

Comments (9)
799 mal gelesen.

9 Kommentare

Leave a comment »

Seiten:

1. Comment von: Axel
23. June 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. December 2008: 18:19

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

3. Comment von: zeroTM
20. December 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. Comment von: Struppi
20. December 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. Comment von: Don P
6. March 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. Comment von: Struppi
7. March 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. Comment von: Struppi
9. March 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. Comment von: Don P
15. March 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. Comment von: Struppi
15. March 2011: 18:46

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

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful