Wie rufe ich ausgewählte Werte aus einem Mehrfachauswahlelement in JavaScript ab?

Werte aus mehreren ausgewählten Elementen abrufen

Beim Umgang mit Formularelementen, die mehrere Auswahlmöglichkeiten bieten, besteht eine häufige Aufgabe darin, die ausgewählten Werte zu extrahieren. Dies ist besonders relevant für Szenarien, in denen Sie die Präferenzen oder Auswahlmöglichkeiten eines Benutzers erfassen müssen.

JavaScript-Technik zum Extrahieren ausgewählter Werte

Um die ausgewählten Werte von a abzurufen Element mit dem multiple-Attribut bietet JavaScript einen unkomplizierten Ansatz:

<code class="javascript">function getSelectValues(select) {
  var values = [];
  for (var i = 0; i < select.options.length; i++) {
    if (select.options[i].selected) {
      values.push(select.options[i].value || select.options[i].text);
    }
  }
  return values;
}

Diese Funktion iteriert durch das Die Optionen des Elements werden angezeigt und diejenigen identifiziert, die ausgewählt sind. Wenn eine Option ausgewählt ist, ruft die Funktion je nach Anwendungsfall deren Wert oder Text ab. Das Ergebnis ist ein Array mit den ausgewählten Werten.

Beispielverwendung

Beachten Sie das folgende HTML-Markup:

<code class="html"><select multiple>
  <option>Option 1</option>
  <option value="Option 2">Option 2</option>
</select>

<button onclick="
  var select = document.querySelector('select');
  var values = getSelectValues(select);
  alert(values);
">
  Show Selected Values
</button></code>

Wenn auf die Schaltfläche geklickt wird , die getSelectValues-Funktion wird aufgerufen und die ausgewählten Werte werden in einem Warnfeld angezeigt.

Zusätzliche Überlegungen

Die oben beschriebene JavaScript-Methode bietet eine zuverlässige Möglichkeit, ausgewählte Werte abzurufen aus mehreren Auswahlfeldern auswählen. Beachten Sie jedoch, dass es unter bestimmten Umständen zu browserübergreifenden Kompatibilitätsproblemen mit den Wert- und Texteigenschaften kommen kann. Um ein konsistentes Verhalten sicherzustellen, sollten Sie die Verwendung einer Bibliothek wie jQuery in Betracht ziehen, wenn die Browserkompatibilität ein großes Problem darstellt.

Das obige ist der detaillierte Inhalt vonWie rufe ich ausgewählte Werte aus einem Mehrfachauswahlelement in JavaScript ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery html Array if for select using Attribute function this alert

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie behebe ich den Fehler „Kein Header „Access-Control-Allow-Origin““ beim Laden von XML mit jQuery AJAX?Nächster Artikel：Wie behebe ich den Fehler „Kein Header „Access-Control-Allow-Origin““ beim Laden von XML mit jQuery AJAX?

In Verbindung stehende Artikel

Mehr sehen

• Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
• Detaillierte Erläuterung des JavaScript-Funktions-Curryings
• Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
• Angularjs integriert WeChat UI (weui)
• Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über unsHaftungsausschlussSitemap

© php.cn All rights reserved