Kontakt

michael trenkler eBuisness Solutions
Humboldtstraße 1
79098 Freiburg

Email info@mtcd.de
Telefon+49 761 453 89 72  
Mobil+49 151 234 34 080
Profil Michael Trenkler
vcf-Card herunterladen
Mein Profil bei xing

Select-Felder und Auswahllisten erweitern mit jQuery

Kleines jQuery-Modul zur Erweiterung von Standard-HTML-Select Elementen.

Ich fand die Standard-SELECT Elemente in HTML nie so wirklich richtig schick. Gerade bei umfangreichen Listen mit mehr als 10 Einträgen fehlt eine effektive Möglichkeit zur Sortierung oder Suche, häufig ist das Auswahlfenster zu klein oder zu groß, und per CSS gestalten läßt sich das Ding auch nicht.

Das Modul extendSelect soll genau diese Probleme lösen.

Viel Spaß damit!

Features

  • Übernimmt alle im SELECT vorhandenen Option-Elemente 
  • Läßt das Original-SELECT unverändert
  • Markiert alle ausgewählten OPTION-Elemente nach Auswahl XHTML-konform mit selected="selected"
  • Mehrfachauswahl und Auswahl per Doppelklick
  • Deselektion von Option-Elementen per Klick auf Papierkorb-Icon
  • Suche direkt im Modalfenster
  • Modalfenster konfigurierbar in der Größe veränderbar (resizable) und frei positionierbar (draggable)
  • Konfigurierbare Höhe und Breite (modalHeight,modalWidth)
  • 100& kompatibel zum Einsatz in Weblication CORE/GRID CMS

Beispiel:

Installation und Voraussetzungen

Benötigt jQuery ab Version 1.6.2 und jQuery-UI ab Version 1.8.15

  • Inhalt des ZIP-Files herunterladen und extrahieren
  • Javascript-Dateien und CSS-Dateien einbinden
  • Select mit Einträgen erstellen 
  • Mit jQuery das Select selektieren
  • Auf das jQuery-Objekt die Funktion .extendSelect() aufrufen
<!-- JS einbinden --><script type="text/javascript" src="/de-wAssets/extra/jQuery.extendSelect.pn.js"></script><!-- CSS einbinden --><link rel="stylesheet" type="text/css" href="/de-wAssets/extra/jQuery.extendSelect.pn.css"/><!-- HTML erstellen --><select name="selectEntries" multiple="1" size="20"><option value="bauernhof">Ferien auf dem Bauernhof</option><option value="schauinsland_wandern">Wandern auf dem Schauinsland</option><option value="ski_feldberg">Skifahren im Feldberg-Gebiet</option><option value="wellness_dreisam">Wellness-Urlaub in der Dreisam-Oase</option></select><!-- JQUERY --><script type="text/javascript">
  jQuery(document).ready(function(){
      
    $('select[name="selectEntries"]').extendSelect({
      'modalHeight': '400px',
      'modalResizable': true
    });
  });
</script>
Download extendSelect.pn.zip

Veröffentlicht ohne Gewährleistung, Support oder ähnliches. Bei Integration in Produktivumgebungen bitte ordentlich testen - Verwendung auf eigene Verantwortung.

Anmerkungen, Verbesserungsvorschläge etc. bitte wie üblich per Mail oder hier rein: