자바스크립트 선택

| | | | |

웹 양식을 만드는 방법을 배우게 될 때 가장 일반적인 작업 중 하나는 드롭다운 메뉴에서 값을 가져오는 것입니다. 이 기사에서는 JavaScript를 사용하여 이러한 값을 얻는 방법을 배울 것입니다.

HTML을 사용하여 드롭다운 요소를 만드는 방법에 대해 간략히 살펴보겠습니다. 길을 잃으면 제 Codepen 을 따르십시오.

드롭다운 요소를 빌드하려면 select를 사용하고 아래에 중첩된 옵션 자식을 사용해야 합니다. 선택 요소는 드롭다운 메뉴를 만들고 옵션 태그를 사용하여 드롭다운 메뉴에서 이러한 옵션을 설정합니다.

좋아하는 과일(이모티콘 포함)의 드롭다운 메뉴를 만들어 보겠습니다.

나중에 JavaScript로 채울 빈 h2를 추가했습니다. 이 시점에서 좋아하는 과일을 선택할 수 있습니다.

92151925 81da0a00 Ede7 11EA 9796 2a8a506c4a6e

여기서 속성 options d ` 배열 요소에 액세스합니다. 다음으로 선택한 옵션의 인덱스를 선택하고 해당 값 또는 텍스트에 액세스합니다.

이제 두 변수를 모두 console.log에 기록해 보십시오. 무슨 일이야? 아무것도. 왜요? 첫 번째 요소에 빈 값이 있기 때문입니다(단지 자리 표시자일 뿐입니다). 첫 번째 옵션에 대한 의견을 제시하고 다시 시도하십시오. 야! 자바스크립트로 값과 텍스트를 얻습니다.

자바스크립트로 드롭다운 메뉴 변경 수신

드롭다운 메뉴를 동적으로 만들어야 합니다. 페이지의 변경 사항에 반응하도록 설계되었습니다. 이를 염두에 두고 eventListener를 과일 요소에 할당할 것입니다.

eventListener를 사용하여 드롭다운 메뉴에서 변경 사항을 듣습니다. 다른 튜토리얼 모듈에서 본 것처럼 e.target.value를 실행하여 선택한 옵션의 값을 얻을 수도 있습니다.

여기에 있습니다. 이제 과일 옵션을 선택할 수 있으며 JavaScript는 드롭다운 메뉴의 변경 사항에 반응하고 그에 따라 h2를 업데이트합니다. 성공적인 법칙

92155152 88b74b80 Edec 11EA 8016 7f8911f26735

결론

웹 개발을 배울 때 가치를 펼치는 것이 얼마나 필수적인 기술인지, 우리가 얻는 가치는 사용자에게 선택을 표시하거나 기본 데이터를 업데이트하려는 경우 중요합니다. DOM의 변경 사항에 "반응"하기만 하면 됩니다. JavaScript를 사용하면 이러한 값을 즉시 얻을 수 있습니다.

<입력 유형 = "숨겨진"이름 = "ck_medium"값 = " 블로그 "> <입력 유형 = 숨김 "이름 =" "값 = ck_campaign ft-express-WGT-블로그 "> <입력 유형 =" hidden "name =" debit "value =" SFT ">