JavaScript를 사용하여 배열 값이 포함된 드롭다운 목록을 만드는 방법

개요

웹 페이지의 프런트 엔드를 방해하지 않고 드롭다운 목록에서 옵션을 얻으려면 배열을 사용할 수 있습니다. 배열에서처럼 옵션이나 값을 얼마든지 저장할 수 있습니다. 따라서 이러한 값을 선택 태그에 있는 코드의 HTML 부분에 직접 입력하는 대신 배열에서 렌더링할 수 있으므로 페이지의 사용자 인터페이스(UI)를 방해하지 않고 더 많은 값을 쉽게 추가할 수 있습니다.

방법

이 기술을 사용하면 옵션 값을 목록에 쉽게 렌더링할 수 있는 매우 간단한 기술입니다. 배열을 사용하면 모든 문자열 유형 값을 단일 변수에 저장할 수 있어 공간 복잡성이 줄어듭니다. 또한 "for", "foreach", "map()"과 같은 많은 함수를 사용하여 배열을 반복하고 값을 렌더링할 수 있습니다.

문법

드롭다운 목록을 만드는 구문은 -

입니다. 으아아아

알고리즘

1단계 −HTML 코드 템플릿을 만듭니다. HTML에서 드롭다운 목록을 만들려면 선택 태그를 사용하여 드롭다운 목록을 만들고 옵션 태그를 사용하여 목록을 만듭니다.

으아아아

2단계 − 옵션을 요소로 포함하는 배열을 초기화하고 빈 문자열 유형 변수를 만듭니다.

으아아아

3단계 − 이제 배열의 값을 드롭다운 목록의 옵션 목록에 매핑하는 배열의 매핑 방법을 사용합니다. 연결 기술을 사용하여 옵션을 드롭다운 목록에 연결합니다.

으아아아

4단계 − 이제 옵션 변수에는 배열의 옵션 목록이 포함됩니다. 배열에서 렌더링된 값을 드롭다운 목록에 표시합니다.

으아아아

5단계−모든 렌더링된 옵션이 드롭다운 목록에 나타나며 사용할 수 있습니다.

예

이 예에서는 배열에서 옵션 값을 렌더링합니다. map() 함수를 사용하여 옵션 마커를 사용하여 배열을 반복하고 이를 문자열 유형 변수와 연결했습니다. innerHTML() 메서드를 사용하여 select 태그에 출력을 표시합니다.

으아아아

아래 이미지는 위 예의 출력을 보여줍니다. 이는 배열을 옵션 목록으로 HTML로 렌더링하는 방법을 보여주기 위한 것입니다. 따라서 보다 대화형으로 만들고 싶다면 부트스트랩 구성 요소를 사용하여 스타일을 더욱 아름답게 만들 수 있습니다.

결론

이 방법은 드롭다운 목록 옵션 값을 표시하는 가장 좋은 방법입니다. 이것의 가장 큰 장점은 본질적으로 동적이어서 배열을 쉽게 조작할 수 있다는 것입니다. 즉, 배열에서 옵션을 쉽게 업데이트, 추가 또는 제거할 수 있다는 의미입니다. 옵션 목록을 만들었으므로 D-R-Y(Don't Repeat Yourself)를 엄격히 따릅니다. 이는 구성 요소로 작동하며 웹 페이지의 어느 곳에서나 렌더링할 수 있으므로 일부 사용자 인터페이스(UI) 개발만 필요합니다.

위 내용은 JavaScript를 사용하여 배열 값이 포함된 드롭다운 목록을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!