<select>에서 선택된 값 가져오기 : HTMLCollection

 

 

select 값을 value에 넣기만 했지 해당 value에서 꺼내온 것이 기억이 잘 안나 메모해놓는다.

import { useState } from "react";

export default function App() {
  const initialFruitList = [
    { id: 1, name: "사과", color: "RED" },
    { id: 2, name: "바나나", color: "YELLOW" },
    { id: 3, name: "체리", color: "RED" },
    { id: 4, name: "복숭아", color: "PINK" },
    { id: 5, name: "포도", color: "PURPLE" },
  ];

  const [fruitList, setFruitList] = useState(initialFruitList);
  const [fruitDetail, setFruitDetail] = useState({
    selectedFruit: "",
    selectedFruitName: "",
  });

  return (
    <div className="App">
      <div>이 과일은 {fruitDetail.selectedFruitName} 입니다.</div>
      <select
        style={{
          width: "200px",
          border: "3px solid #ddd",
          height: "45px",
          backgroundColor: "white",
        }}
        onChange={(e) => {
          setFruitDetail((prev: any) => {
            return {
              ...prev,
              selectedFruit: e.target.value,
              selectedFruitName: "여기",
            };
          });
        }}
        value={fruitDetail.selectedFruit}
      >
        <option value="">과일 선택</option>
        {fruitList?.map((fruit: any) => (
          <option key={fruit.id} value={fruit.id}>
            {fruit.name} ({fruit.color})
          </option>
        ))}
      </select>
    </div>
  );
}

(예시 데이터)

 

처음엔 함수로 찾아서 꾸역꾸역 넣었다..

const getSelectedFruitName = (value) => {
    const selectedFruit = fruitList.find(
      (fruit) => fruit.id === parseInt(value)
    );
    return selectedFruit ? `${selectedFruit.name}` : "";
  };

 

해서  "여기" 부분에 getSelectedFruitName(e.target.value)로 넣어서 사용했다.

 

 

또다른 방법은, HTMLCollection을 이용하는 것인데

HTMLCollection에는 현재 선택된 각 옵션에 대한 정보가 포함되어 있고, 주로 다중 선택을 지원하는 경우에 유용하게 사용된다고 한다.

..
	selectedFruitName: e.target.selectedOptions[0].text,
..

 

e.target.selectOptions 를 콘솔에 찍어보면,

 

 

이렇게 나오기 때문에 꺼내서 쓰는 것이다.ㅎ

추가로 나는 앞의 과일이름 부분만 따서 쓸 거기 때문에 따로 가공( .split(' ')[0] )도 조금추가했다.