Maison > interface Web > js tutoriel > Comment obtenir les valeurs sélectionnées à partir d'un élément à sélection multiple en JavaScript ?

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

Linda Hamilton
Libérer: 2024-11-04 03:16:29
original
515 Les gens l'ont consulté

How to Get Selected Values from a Multi-Select Element in JavaScript?

Acquérir toutes les options sélectionnées à partir d'un élément à sélection multiple

Dans le domaine du développement Web, une exigence courante est de récupérer les valeurs sélectionnées à partir d'une boîte de sélection multiple à l'aide de JavaScript. Pour répondre à ce besoin, examinons les solutions fournies.

Une approche consiste à parcourir les options de l'élément select, à vérifier si elles sont sélectionnées et à accumuler leurs valeurs dans un tableau. Bien que cette méthode soit simple, elle peut s'avérer fastidieuse, en particulier lors de la gestion de grandes listes.

Une solution plus élégante, comme suggérée dans la deuxième réponse, implique la fonction getSelectValues(). Il parcourt efficacement les options, collectant les valeurs sélectionnées, qu'elles soient dérivées de l'attribut de valeur de l'option ou de son contenu textuel.

Considérez l'exemple fourni :

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

<button onclick="
  var el = document.getElementsByTagName('select')[0];
  alert(getSelectValues(el));
">Show selected values</button></code>
Copier après la connexion

Lorsque le bouton est cliqué, la fonction getSelectValues() capture les valeurs d'option sélectionnées et les affiche dans une boîte de dialogue d'alerte. Cela démontre la facilité et la flexibilité de cette méthode.

Que vous optiez pour une itération manuelle ou que vous utilisiez la fonction getSelectValues(), vous disposez d'une solution robuste pour récupérer les valeurs sélectionnées dans une zone de sélection multiple, vous permettant d'accéder et manipulez efficacement les données dans vos applications Web.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal