DropDown mit eigener Angabe

[keine_Ahnung]

Hallo,

ich hab da mal vor einiger Zeit ein tolles Javascript gefunden das es mir erlaubt in einer DropDown Box auch noch eine eigene Angabe zu machen.

Das Script geht auch aber nur immer mit der ersten DropDown Box. Ich selber hab keine Ahnung von Javascript und würd mich freuen wenn mir jemand kurz erklären könnte wie das funktioniert oder fast noch besser wie ich das Script hier verändern muss, dass ich es auf einzelene DropDown Boxen anwenden kann.

Am liebsten würde ich es extern in einer .js Datei lasen und nur einbinden und dann den gewünschten DropDowns diese Funktion verpassen wie eine Klasse oder ID.

Geht das? Wenn nicht dann wenigstens so das alle DropDown Boxen das Script nutzen.

Hier das script:
window.onload = function() {

var other = new Option('Anderes …');
      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

}
          };
    };

[Felix Riesterer]

Liebe(r) keine_Ahnung,

eine korrektur ist sehr simpel:

window.onload = function() {

Das ist nicht gut, da Du damit andere Scripte eventuell abschießt. Besser:

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

Habe das mal eben schnell heruntergeschrieben, aber nicht getestet!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[keine_Ahnung]

Hallp Felix,

vielen, vielen Dank, das Script läuft. Wie gesagt ich hab keine Ahnung von Java aber kann ich das Script auch mit bestimmt DropDown Boxen assoziieren oder gehen nur alle?

Grüße aus Richmond, VA

[Felix Riesterer]

Liebe(r) keine_Ahnung,

Wie gesagt ich hab keine Ahnung von Java

Du meinst JavaSCRIPT. Es gibt da einen großen Unterschied zwischen diesen beiden Sprachen!

aber kann ich das Script auch mit bestimmt DropDown Boxen assoziieren

Lerne dazu, dann kannst Du alles mögliche...

oder gehen nur alle?

Das Script in der obigen Form ändert (so wie von Dir gewünscht) alle Select-Elemente im Dokument. Wenn Du nur spezielle Selects ändern willst, dann solltest Du sie entweder mit einer ID oder mit einer CSS-Klasse "markieren". Natürlich muss Dein Script dann wissen, worauf es reagieren soll, und wie.

Keine Ahnung (und dann auch noch eine Mail schicken!?) ist keine Entschuldigung für nicht-selbst-aktiv-werden. Ändere Deinen Wissensstand! Das obige Script aus Deinem original-Posting wäre ein wunderbarer Ansatz, um tiefer in Javascript einzusteigen. Wenn Du das verstanden hast, dann wirst Du auch meine Änderungen verstehen lernen. Dann kannst Du selbst probieren, das Script zu modifizieren. Und komme bitte erst wieder, wenn Du mit Deinem _eigenen_ Versuch gerade fest hängst.

Liebe Grüße aus Ellwangen,

Felix Riesterer.