JavaScript의 다중 선택 상자에서 선택한 값을 얻는 방법은 무엇입니까?

JavaScript를 사용하여 다중 선택 상자에서 값 가져오기

여러 선택 상자가 있는 시나리오에서는 선택한 값에 액세스하는 것이 필수적입니다. 이 질문은 JavaScript를 사용하여 이러한 값을 검색하는 효과적인 접근 방식을 탐구합니다.

먼저 제공한 코드 조각은 다중 선택 상자의 옵션을 반복하여 각 옵션이 선택되었는지 확인합니다. true인 경우 옵션 값이 배열에 추가됩니다.

선택한 값을 얻는 간결하고 효율적인 방법을 제공하는 대체 솔루션이 아래에 제시되어 있습니다.

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

이 함수는 선택 요소를 인수로 사용하고 선택한 값의 배열을 반환합니다. 사용법을 보여주는 간단한 예는 다음과 같습니다.

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

위 내용은 JavaScript의 다중 선택 상자에서 선택한 값을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!