Comment récupérer les valeurs sélectionnées à partir d'un élément à sélection multiple en JavaScript ?

Récupération de valeurs à partir de plusieurs éléments de sélection

Lorsque vous traitez des éléments de formulaire comportant plusieurs sélections, une tâche courante consiste à extraire les valeurs sélectionnées. Ceci est particulièrement pertinent pour les scénarios dans lesquels vous devez capturer les préférences ou les choix d'un utilisateur.

Technique JavaScript pour extraire les valeurs sélectionnées

Pour récupérer les valeurs sélectionnées à partir d'un élément avec l'attribut multiple, JavaScript fournit une approche simple :

<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;
}

Cette fonction parcourt l'élément options de l'élément et identifie celles qui sont sélectionnées. Si une option est sélectionnée, la fonction récupère sa valeur ou son texte en fonction du cas d'utilisation spécifique. Le résultat est un tableau contenant les valeurs sélectionnées.

Exemple d'utilisation

Considérez le balisage HTML suivant :

<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>

Lorsque l'on clique sur le bouton , la fonction getSelectValues ​​est invoquée et les valeurs sélectionnées sont affichées dans une boîte d'alerte.

Considérations supplémentaires

La méthode JavaScript décrite ci-dessus offre un moyen fiable de récupérer les valeurs sélectionnées. à partir de plusieurs cases de sélection. Cependant, il convient de noter que dans certaines circonstances, vous pouvez rencontrer des problèmes de compatibilité entre navigateurs avec les propriétés de valeur et de texte. Pour garantir un comportement cohérent, envisagez d'utiliser une bibliothèque comme jQuery si la compatibilité du navigateur est une préoccupation majeure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment corriger l'erreur \"\'No \'Access-Control-Allow-Origin\' header\'" lors du chargement de XML avec jQuery AJAX ?Article suivant：Comment corriger l'erreur \"\'No \'Access-Control-Allow-Origin\' header\'" lors du chargement de XML avec jQuery AJAX ?

Articles Liés

Voir plus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved