Hallo,
ich nutze dieses tolle Script um DropDown Boxen auch als Eingabefelder nutzen zu können.
Ich habe das Script in einer externen Datei und binde es dann in verschiednen Seiten ein. In einigen habe ich mehrere DropDown Boxen aber das Script funktioniert nur mit der letzten Box auf der Seite.
Kann mir jemand erklären wie ich das Script auf mehrere DropDown Boxen anwenden kann? Vielleicht irgendwie wie eine CSS Klasse...
Ich sollte noch erwähnen das ich keine Ahnung von JavaSdript habe und sehr dankbar wäre wenn ich es nicht für diese eine Funktion lernen müsste.
Script:
SelectErweiterung = {
oldWinOnLoad : null, // Hier wird die alte onload-Funktion abgelegt werden.
init : function () {
this.oldWinOnLoad = window.onload;
window.onload = function () {
if (typeof (SelectErweiterung.oldWinOnLoad) == "function")
SelectErweiterung.oldWinOnLoad();
SelectErweiterung.erweitern();
}
},
erweitern : function() {
var alleSelects, i, s;
alleSelects = document.getElementsByTagName("select");
for (i = 0; i < alleSelects.length; i++) {
s = alleSelects[i];
var other = new Option('Anderes …');
// gilt nicht mehr, da s jetzt in einer Schleife definiert wird! var s = document.getElementsByTagName('select')[0];
s.options[s.options.length] = other; // Eintrag „Anderes …“ hinzufügen
s.onchange = function() { // Aktion bei Änderung der Auswahl
if (this.selectedIndex == (s.options.length - 1)) { // Bei Auswahl des letzte Elementes
var i = document.createElement('input'); // Eingabefeld erstellen
i.value = i.defaultValue = 'Anderes …'; // Wert und Standardwert festlegen
i.onblur = function() { // Aktion beim Verlassen des Eingabefeldes
if (i.value != i.defaultValue) { // Sollte ein neuer Wert eingegeben worden sein …
--s.options.length; // Eintrag „Anderes …“ entfernen
s.options[s.options.length] = new Option(i.value, i.value); // Neuen Wert hinzufügen
s.options[s.options.length] = other; // Eintrag „Anderes …“ wieder hinzufügen
/* Auswahl auf das soeben eingefügte Element setzen */
s.selectedIndex = (s.options.length - 2);
} else {
/* Auswahl auf das erste Element setzen, da onchange bei
erneuter Auswahl von „Anderes …“ sonst nicht aktiv wird */
s.selectedIndex = 0;
}
s.style.display = ''; // Auswahlfeld wieder einblenden
i.parentNode.removeChild(i); // Eingabefeld wieder entfernen
};
this.parentNode.insertBefore(i, this); // Eingabefeld vor Auswahlfeld einfügen
this.style.display = 'none'; // Auswahlfeld ausblenden
i.focus(); // Eingabefeld fokussieren
i.select(); // Inhalt auswählen
}
};
};
}
}
SelectErweiterung.init();