Comment obtenir les valeurs sélectionnées à partir d’une zone de sélection multiple en JavaScript ?

Obtenir des valeurs à partir d'une zone de sélection multiple à l'aide de JavaScript

Dans les scénarios où vous rencontrez une zone de sélection multiple, il est essentiel d'accéder à ses valeurs sélectionnées. Cette question explore une approche efficace pour récupérer ces valeurs à l'aide de JavaScript.

Pour commencer, l'extrait de code que vous avez fourni parcourt les options de la zone de sélection multiple, vérifiant si chaque option est sélectionnée. Si vrai, la valeur de l'option est ajoutée à un tableau.

Une solution alternative est présentée ci-dessous, offrant un moyen concis et efficace d'obtenir les valeurs sélectionnées :

<code class="js">function getSelectValues(select) {
  // Create an empty array to store the values.
  const result = [];

  // Obtain the options from the select element.
  const options = select && select.options;

  // Loop through the options to check which ones are selected.
  for (let i = 0; i < options.length; i++) {
    const option = options[i];

    // If the option is selected, we push its value into the result array.
    if (option.selected) {
      result.push(option.value || option.text);
    }
  }

  // Return the populated result array with the selected values.
  return result;
}

Cette fonction prend en compte un élément select comme argument et renvoie un tableau de valeurs sélectionnées. Voici un exemple rapide démontrant son utilisation :

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

<button onclick="
  const selectElement = document.getElementsByTagName('select')[0];
  const selectedValues = getSelectValues(selectElement);
  console.log(selectedValues);
">Show Selected Values</button></code>

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!