DropDown mit Eingabe

[keine_Ahnung]

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();

[Mathias Brodala]

Hallo keine_Ahnung.

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.

Ja, eine markante Unzulänglichkeit in meinem Script, danke fürs Auffinden.

Da mir ein kompletter Neuaufbau oft leichter fällt, gibt es deshalb nun eine verbesserte Variante. Die Einbindung in dein Script sollte nicht schwer fallen, da du nun lediglich die makeComboBox-Funktion übernehmen und entsprechend aufrufen musst.

Einen schönen Samstag noch.

Gruß, Mathias

[keine_Ahnung]

Hallo Mathias,

erst mal Gratulation für dieses unglaublich praktische Skript! Als ich das gefunden hatte bin ich vor Freude fast vom Stuhl gefallen!

Die Einbindung in dein Script sollte nicht schwer fallen, da du nun lediglich die makeComboBox-Funktion übernehmen und entsprechend aufrufen musst.

Ähm ja ich hab zwar etwas Ahnung von php aber das sagt mir jetzt leider nicht... könntest du das etwas genauer erklären? Ich wäre dir sehr dankbar.

Grüße

[Mathias Brodala]

Hallo keine_Ahnung.

erst mal Gratulation für dieses unglaublich praktische Skript! Als ich das gefunden hatte bin ich vor Freude fast vom Stuhl gefallen!

*g* Danke.

Die Einbindung in dein Script sollte nicht schwer fallen, da du nun lediglich die makeComboBox-Funktion übernehmen und entsprechend aufrufen musst.

Ähm ja ich hab zwar etwas Ahnung von php aber das sagt mir jetzt leider nicht... könntest du das etwas genauer erklären? Ich wäre dir sehr dankbar.

Du entfernst den gesamten ursprünglichen Code aus der for-Schleife deines SelectErweiterung-Objektes und fügst statt dessen dort schlichtweg makeComboBox(alleSelects[i]); ein. Diese Funktion musst du natürlich vorher in aus meinem in dein Script kopiert haben, sonst kann sie nicht aufgerufen werden.

Einen schönen Samstag noch.

Gruß, Mathias

[keine_Ahnung]

Hallo Mathias,

Du entfernst den gesamten ursprünglichen Code aus der for-Schleife deines SelectErweiterung-Objektes und fügst statt dessen dort schlichtweg makeComboBox(alleSelects[i]); ein. Diese Funktion musst du natürlich vorher in aus meinem in dein Script kopiert haben, sonst kann sie nicht aufgerufen werden.

Okay also wenn ich dich richtig verstanden habe füge ich statt dem <select> die makeComboBox ein. In meiner externen Datei mit deinem Script füge ich irgendwo am Endo wo das mit dem i ist meine alte DorbDown Box so das wenn die Seite aufgerufen wird die ganze DropDown Box mehr oder weniger aus derexternen Datei geholt wird. Und für jede DropDown mache ich mir dann eine eigene externe Datei?

Besten Dank

[Mathias Brodala]

Hallo keine_Ahnung.

Du entfernst den gesamten ursprünglichen Code aus der for-Schleife deines SelectErweiterung-Objektes und fügst statt dessen dort schlichtweg makeComboBox(alleSelects[i]); ein. Diese Funktion musst du natürlich vorher in aus meinem in dein Script kopiert haben, sonst kann sie nicht aufgerufen werden.

Okay also wenn ich dich richtig verstanden habe füge ich statt dem <select> die makeComboBox ein.

Nein, du hast mich nicht richtig verstanden. Dein HTML-Code bleibt unberührt, das ist ja da schöne an dem Script.

In meiner externen Datei mit deinem Script füge ich irgendwo am Endo wo das mit dem i ist meine alte DorbDown Box so das wenn die Seite aufgerufen wird die ganze DropDown Box mehr oder weniger aus derexternen Datei geholt wird. Und für jede DropDown mache ich mir dann eine eigene externe Datei?

Nein, du gehst in die völlig verkehrte Richtung. Auch wenn du es nicht willst, solltest du dich wirklich etwas mit JS befassen, um wenigstens die absoluten Grundlagen zu verstehen. Fürs erste genügt es, wenn du dein derzeitiges Script im head oder der externen JS-Datei wie folgt änderst:

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();  
        }  
    },  
  
    makeComboBox : function(s) {  
    // Code zur Generierung der Combobox.  
    },  
  
    erweitern : function() {  
  
        var alleSelects = document.getElementsByTagName("select");  
  
        for (var i = 0; i < alleSelects.length; i++) {  
  
                makeComboBox(alleSelects[i]);  
        }  
  
    }  
}  
  
SelectErweiterung.init();

Solltest du auch dies noch nicht umsetzen könne, kann ich dir nicht weiterhelfen.

Einen schönen Sonntag noch.

Gruß, Mathias

[Patrick Andrieu]

Hallo Mathias!

Die Frage hat nicht mit der des OPs zu tun. Mir geht es um die Syntax. Welche Funktion hat hier der Doppelpunkt:

[code lang=javascript]SelectErweiterung = {
    oldWinOnLoad : null,

^     ^

init : function () {

^
Ein Operator ist es hier wohl nicht, wozu dient er dann?

Viele Grüße aus Frankfurt/Main,
Patrick

[Kai345]

Grütze .. äh ... Grüße!

Welche Funktion hat hier der Doppelpunkt:

http://aktuell.de.selfhtml.org/artikel/javascript/organisation/index.htm#object-literale

Cü
Kai

[Patrick Andrieu]

Hallo Kai345!

Object-Lieterale

Hm ja danke! Dabei war mir der Artikel nicht unbekannt, nur vertieft hatte ich die Lektüre nicht.

Viele Grüße aus Frankfurt/Main,
Patrick

[keine_Ahnung]

Hallo Mathias,

erst noch mal danke für das Script! Es läuft auch wenn alle DropDown Boxen angesprochen werden aber wegen der einen wo das nicht gehen soll will ich mir jetzt erst mal keine grauen Haare wachsen lassen.
Aber du hast wohl recht vielleicht sollte ich echt mal mehr in JavaScript einsteigen. Leider gibt es so viele andere Sachen die man auch können sollte und wer hat heutzutage schon noch Zeit...

Schöne Woche noch

[Mathias Brodala]

Hallo keine_Ahnung.

erst noch mal danke für das Script! Es läuft auch wenn alle DropDown Boxen angesprochen werden aber wegen der einen wo das nicht gehen soll will ich mir jetzt erst mal keine grauen Haare wachsen lassen.

Wenn du diese irgendwie eindeutig identifizieren kannst, kannst du ja vor dem Aufruf von makeComboBox in der Schleife einfach ein „continue“ einfügen. Dadurch wird dieses Auswahlfeld nicht angerührt.

Aber du hast wohl recht vielleicht sollte ich echt mal mehr in JavaScript einsteigen. Leider gibt es so viele andere Sachen die man auch können sollte und wer hat heutzutage schon noch Zeit...

Wohl wahr …

Einen schönen Dienstag noch.

Gruß, Mathias

[Mathias Brodala]

Hallo nochmal.

Da mir ein kompletter Neuaufbau oft leichter fällt, gibt es deshalb nun eine verbesserte Variante.

… welche ich nun ein weiteres mal verbessert habe. Da diese Funktionalität für Mehrfachauswahlfelder nicht sinnvoll ist (die Formularfelder würden durch die Gegend springen), wird sie für solcherart gekennzeichnete Auswahlfelder nun gar nicht erst ausgeführt. Des weiteren habe ich einen Workaround für Opera eingebaut, der bei einer Nichtänderung des Vorgabetextes partout nicht die allererste Option auswählen wollte. Zu guter Letzt noch ein Bug im IE, welcher irgendwie nicht auf den Wert von Optionen zugreifen kann.

BTW: Wieso kann man folgendermaßen nicht durch die Eigenschaften eines option-Elementes iterieren?

var s = document.getElementsByTagName('select')[0];  
var t = '';  
  
for (var prop in s.options[0]) {  
  
  s += 'Option[' + prop + '] = ' + s.options[0][prop] + '\n';  
}  
  
alert(s);

Hier gibt es nur eine Fehlermeldung in allen Browsern …

Einen schönen Montag noch.

Gruß, Mathias

[Mathias Brodala]

Hallo nochmal.

BTW: Wieso kann man folgendermaßen nicht durch die Eigenschaften eines option-Elementes iterieren?

var s = document.getElementsByTagName('select')[0];

var t = '';

for (var prop in s.options[0]) {

s += 'Option[' + prop + '] = ' + s.options[0][prop] + '\n';
}

alert(s);

>   
> Hier gibt es nur eine Fehlermeldung in allen Browsern …  
  
Was bei diesem in Eile geschriebenen Code logisch ist. So:  
  
~~~javascript
var s = document.getElementsByTagName('select')[0];  
var t = '';  
  
for (var prop in s.options[0]) {  
  
  t += 'Option[' + prop + '] = ' + s.options[0][prop] + '\n';  
}  
  
alert(t);

Einen schönen Montag noch.

Gruß, Mathias