JavaScript Alle Einträge eines drop-down Felds als array?

highend01 · 21. November 2020

Hi.

Ich würde gerne von einem <select></select> Element ein Array bekommen, welches die Einträge enthält, die im ausgeklappten Zustand lesbar sind. Nicht! die value= Einträge.

Ein Beispiel:

HTML:

<select name="tagListsDropDown" id="tagListsDropDown">
    <option value="abc;ihk">Other</option>
    <option value="lemonade;water">Beverages</option>
    <option value="apple;banana">Fruits</option>
</select>

Von diesem hätte ich gern ein Array was ich per Schleife für einen Textvergleich durchlaufen kann.
Final will ich wissen, ob z.B. "Other" enthalten ist und welches Element / Index er in der Schleife hat. Bei diesem Beispiel als array also [0].

Laufen sollte das nach Möglichkeit auch mit richtig alten Browsern (IE 6+).

Danke!

tollertyp · 21. November 2020

Also doch die Option-Einträge?

Wie sieht denn dein Ansatz bislang aus?

Nutzt du bereits etwas wie JQuery? (Version 1.12 wäre ja nutzbar)
https://jquery.com/browser-support/

netzgestaltung · 21. November 2020

Für IE6 würde ich dir zu jQuery raten.

Javascript:

;(function($){
  var options = [],
      has_other = false;

  $('#tagListsDropDown').children().each(function(index){
    options[index] = $(this).text();
    if ( options[index] === 'Other' ) {
      has_other = true;
    }
  });
  // keine console in IE6, use https://github.com/netzgestaltung/jquery.console
  console.log(options);
  console.log(has_other);
})(jQuery);

highend01 · 21. November 2020

@tollertyp
Ich hab das erste Posting noch mal etwas geändert. Die value= Einträge interessieren mich nicht, nur die Titel die im drop-down beim Ausklappen lesbar sind.

Ich hatte bisher keinen Ansatz, fand einfach nichts, was sich nicht auf die value= bezogen hätte.

@netzgestaltung
Danke sehr. Ich bekomme hier nicht auf einfache Art und Weise jQuery integriert. Gäbe es auch eine reine JavaScriptlösung, die ohne jQuery auskommt? In diesem Fall muss der IE6 dran glauben...

Madman1209 · 21. November 2020

Hi,

Ich bekomme hier nicht auf einfache Art und Weise jQuery integriert

darf man fragen wieso nicht? Einfach im Head per CDN einbinden und fertig. Wenn du was programmieren kannst solltest du auch jQuery einbinden können.

VG,
Mad

highend01 · 21. November 2020

Teilweise u.a. weil auf manchen Rechnern die IE enhanced security configuration aktiv ist und nicht manuell vom user umgestellt werden kann. Das verhindert sowohl den Einsatz der online, als auch der offline Version...

tollertyp · 22. November 2020

Naja, du kannst das schon auch mit Plain-JavaScript machen...
z.B. über https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
(da siehst du auch die Browser-Unterstützung)

Da ich selbst leider keinen so alten Browser mehr zur Verfügung habe (ach, was heißt da leider... zum Glück), kann ich dir da aber nicht sagen, wie du an die Kind-Elemente kommst. Über innerHTML und ein wenig Reguläre Ausdrücke könnte man sich da wohl was hinfrickeln...

Ein RegEx könnte so aussehen:

Code:

<option[^>]*>(.*)<\/option>

Bzw. mit allen Options:

würde also in der Gruppe 1 den Text haben.

Das sollte im IE6 laufen... also die Dinger in ein Array packen oder sonstige Auswertung hab ich nicht gemacht, aber es liefert alle Texte zu den Options:

Code:

<html>
    <body>
        <select name="tagListsDropDown" id="tagListsDropDown">
            <option value="abc;ihk">  Other  </option>
            <option value="lemonade;water">Beverages</option>
            <option value="apple;banana">Fruits</option>
        </select>
        <script lang="text/JavaScript">
            var element = document.getElementById("tagListsDropDown");
            var html = element.innerHTML;
            var re = /<option[^>]*>\s*([^\s]*)\s*<\/option>/g;
            match = re.exec(html);
            while (match != null) {
                //console.info('"' + match[1] + '"');
                alert('"' + match[1] + '"');
                match = re.exec(html);
            }
        </script>
    </body>
</html>

Der RegEx im Beispiel ist noch optimiert und entfernt Leerzeichen um die Ergebnisse.

highend01 · 22. November 2020

Danke sehr, @tollertyp

Final sieht es jetzt so aus:

Javascript:

var element = document.getElementById("tagListsDropDown");
var html    = element.innerHTML;
var re      = /<option[^>]*>\s*([^\s]*)\s*<\/option>/gi;
var i       = 0;
while (match = re.exec(html)) {
    if (match[1].toLowerCase().localeCompare("<some_lower_case_string>") === 0) {
        document.getElementById("tagListsDropDown").selectedIndex = i;
        break;
    }
    i++;
}

Ein bisschen mehr Code (ein zugehöriges textarea Feld wird z.B. noch in Abhängigkeit vom Ergebnis gefüllt, etc.) ist natürlich noch mit drin aber ich wollte für andere zumindest noch zeigen, wie man an den zugehörigen Index ran kommt).

Danke nochmal!

Mutanz77 · 22. November 2020

Du suchst die eigenschaft .text
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement

Javascript:

       <select name="tagListsDropDown" id="tagListsDropDown">
            <option value="abc;ihk">  Other  </option>
            <option value="lemonade;water">Beverages</option>
            <option value="apple;banana">Fruits</option>
        </select>
        <script lang="text/JavaScript">
            var element = document.getElementById("tagListsDropDown");
            o = [].slice.call( element.options );
            o.forEach(function(item) {
                alert(item.text);
            });
        </script>

tollertyp · 22. November 2020

Gibt aber kein forEach im IE6.
Aber options funktioniert, z.B. so:

Code:

for (var i = 0; i < element.options.length; i++) {
    var itemText = element.options[i].text;
    alert(itemText);
}

Mutanz77 · 23. November 2020

Naja, es ging um die Eigenschaft des options Feld. Der Code war nur als Anschaungsbeispiel gedacht. Es gäbe auch ein Polyfill dafür https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach (wobei das in diesem Fall auch nichts hilft, das Beispiel von mir nutzt noch mehr Dinge, ich glaube call() kann der IE auch nicht)

Suche

JavaScript Alle Einträge eines drop-down Felds als array?

highend01

Cadet 4th Year

tollertyp

Fleet Admiral

netzgestaltung

Captain

highend01

Cadet 4th Year

Madman1209

Fleet Admiral

highend01

Cadet 4th Year

tollertyp

Fleet Admiral

highend01

Cadet 4th Year

Mutanz77

Cadet 2nd Year

tollertyp

Fleet Admiral

Mutanz77

Cadet 2nd Year

Ähnliche Themen