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
Linda Hamiltonoriginal
2024-11-04 03:16:29516parcourir

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>

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!

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