JavaScript를 사용하여 무한 계단식 메뉴 처리 구현
무한 계단식 메뉴는 매우 일반적인 프런트 엔드 상호 작용 방법이며 많은 시나리오에서 널리 사용됩니다. 이 기사에서는 JavaScript를 사용하여 무한 계단식 메뉴를 구현하는 방법을 소개합니다. 도움이 되길 바랍니다.
1. 구현 아이디어
프런트 엔드에 무한 계단식 메뉴를 구현한다는 아이디어는 다음과 같이 요약할 수 있습니다.
- 데이터 소스 정의: 일반적으로 모든 수준의 메뉴 데이터를 저장하는 데 사용되는 JSON 개체입니다. 렌더링 메뉴: 특정 레벨의 옵션을 선택하면 다음 레벨의 메뉴가 동적으로 생성됩니다.
- 연동 효과 달성: 특정 레벨의 옵션을 선택하면 시간에 맞춰 다음 레벨의 메뉴가 업데이트되어야 합니다. 그리고 선택한 옵션에 따라 옵션이 변경될 수 있습니다.
- 구체적인 구현 아이디어는 다음과 같습니다.
- 각 레벨에 메뉴를 표시하려면 HTML에 여러 선택 태그를 정의합니다.
- 각 레벨에 선택 태그를 지정합니다. 변경 이벤트에 바인딩됩니다. 옵션 중 하나가 선택되면 배열의 해당 위치에 있는 값이 업데이트되고 다음 선택 태그가 생성되며 이전 옵션 수준을 기반으로 다음 수준의 선택적 옵션이 렌더링됩니다.
- 루프 생성은 모든 수준에서 태그를 선택하고 DOM에 삽입합니다.
- 2. 코드 구현
무한 계단식 메뉴를 구현하는 과정은 주로 HTML 페이지 레이아웃과 JavaScript 코드 작성의 두 부분으로 구성됩니다. 다음으로, 두 부분의 구현 세부 사항을 각각 살펴보겠습니다.
HTML 페이지 레이아웃- HTML 페이지에서 각 수준에 메뉴를 표시하려면 여러 개의 선택 태그를 만들어야 합니다. 동시에 메뉴의 동적 업데이트를 구현하려면 각 선택 태그에 변경 이벤트를 바인딩해야 합니다.
<body>
<form>
<select id="province" onchange="changeProvince()">
<option value="">请选择省份</option>
<option value="1">浙江</option>
<option value="2">江苏</option>
</select>
<select id="city" onchange="changeCity()"></select>
<select id="area"></select>
</form>
</body>- JavaScript 코드에서 모든 수준의 메뉴 데이터를 저장하려면 JSON 개체를 정의해야 합니다. 특정 레벨의 옵션을 선택하면 다음 레벨의 메뉴가 동적으로 생성되며, 선택한 옵션에 따라 사용 가능한 옵션이 변경됩니다. 구체적인 구현은 다음과 같습니다.
var menuData = {
"province": {
"1": "杭州市",
"2": "温州市"
},
"city": {
"1": {
"11": "西湖区",
"12": "江干区"
},
"2": {
"21": "鹿城区",
"22": "瓯海区"
}
},
"area": {
"11": {
"111": "西溪湿地",
"112": "灵隐寺"
},
"12": {
"121": "杭州大厦",
"122": "江干公园"
},
"21": {
"211": "南湖",
"212": "红旗广场"
},
"22": {
"221": "瓯海公园",
"222": "龙湾湾国际商务区"
}
}
}
var level = ["province", "city", "area"];
var selectedValue = ["", "", ""];
function init() {
generateMenu("province", "1");
}
function changeProvince() {
selectedValue[0] = document.getElementById("province").value;
document.getElementById("city").innerHTML = "";
document.getElementById("area").innerHTML = "";
generateMenu("city", selectedValue[0]);
}
function changeCity() {
selectedValue[1] = document.getElementById("city").value;
document.getElementById("area").innerHTML = "";
generateMenu("area", selectedValue[1]);
}
function generateMenu(currentLevel, currentValue) {
var select = document.createElement("select");
select.setAttribute("id", currentLevel);
select.setAttribute("onchange", "change" + currentLevel.charAt(0).toUpperCase() + currentLevel.slice(1) + "()");
var option = document.createElement("option");
option.setAttribute("value", "");
option.innerHTML = "请选择" + currentLevel;
select.appendChild(option);
var submenu = menuData[currentLevel];
for (var key in submenu) {
if (submenu[key] != null) {
var option = document.createElement("option");
option.setAttribute("value", key);
option.innerHTML = submenu[key];
select.appendChild(option);
}
}
document.getElementById(currentLevel).appendChild(select);
if (currentValue != "") {
document.getElementById(currentLevel).value = currentValue;
if (level.indexOf(currentLevel) < level.length - 1) {
var nextLevel = level[level.indexOf(currentLevel) + 1];
generateMenu(nextLevel, selectedValue[level.indexOf(nextLevel)]);
}
}
}
init();이 코드에서는 먼저 각 레벨의 메뉴 데이터와 배열 레벨을 포함하는 JSON 객체 menuData를 정의하여 각 레벨의 식별자를 저장합니다. 동시에 각 레벨에서 선택된 값을 저장하기 위해 selectedValue 배열도 정의됩니다. 이후 1차 메뉴, 즉 영토 생성을 위한 메뉴를 초기화하기 위한 init 함수를 정의한다.
그런 다음 선택된 지방과 도시의 값을 업데이트하고 다음 레벨 메뉴를 재생성하기 위해changeProvince와changeCity라는 두 가지 함수가 정의됩니다.
마지막으로 현재 레벨 메뉴를 생성하고 다음 레벨을 재귀적으로 호출하는 데 사용되는 generateMenu 함수가 정의됩니다. 메뉴를 생성하는 과정에서 select 태그가 생성되고 해당 옵션이 추가되며, 각 메뉴 렌더링이 완료된 후 DOM에 추가됩니다. 현재 레벨이 마지막 레벨이 아닌 경우 모든 레벨의 메뉴가 생성될 때까지 현재 선택된 값을 기준으로 재귀 호출이 수행됩니다.
3. 요약
위 코드의 구현을 통해 자바스크립트에서 무한 캐스케이딩 메뉴를 구현하는 것이 어렵지 않다는 것을 알 수 있습니다. 본 글에서 소개하는 구현 방법은 비교적 기본적인 구현 방법이므로 다양한 요구 사항에 따라 실제 상황에 따라 조정해야 합니다.
물론, 이 기능을 더 편리하게 구현할 수 있는 jQuery 및 Vue.js와 같이 무제한 계단식 메뉴를 구현하는 데 사용할 수 있는 비교적 성숙한 타사 라이브러리가 이미 있습니다. 그러나 우리는 이러한 도구를 보다 유연하게 사용하여 다양하고 복잡한 작업을 완료할 수 있도록 원칙을 숙지하여 이러한 라이브러리를 사용하는 방법을 이해해야 합니다.
위 내용은 JavaScript를 사용하여 무한 계단식 메뉴 처리 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7629
15
1389
52
89
11
70
19
31
141
CPU를 너무 많이 점유하는 WIN10 서비스 호스트의 동작 과정
Mar 27, 2024 pm 02:41 PM
1. 먼저 작업 표시줄의 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 [작업 관리자] 옵션을 선택하거나, 시작 로고를 마우스 오른쪽 버튼으로 클릭한 후 [작업 관리자] 옵션을 선택합니다. 2. 열린 작업 관리자 인터페이스에서 맨 오른쪽에 있는 [서비스] 탭을 클릭합니다. 3. 열린 [서비스] 탭에서 아래의 [서비스 열기] 옵션을 클릭하세요. 4. 열리는 [서비스] 창에서 [InternetConnectionSharing(ICS)] 서비스를 마우스 오른쪽 버튼으로 클릭한 후 [속성] 옵션을 선택하세요. 5. 열리는 속성 창에서 [연결 프로그램]을 [사용 안 함]으로 변경하고 [적용]을 클릭한 후 [확인]을 클릭하세요. 6. 시작 로고를 클릭한 후 종료 버튼을 클릭하고 [다시 시작]을 선택한 후 컴퓨터를 다시 시작합니다.
WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술
Dec 17, 2023 pm 05:30 PM
WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술
CSV 파일 조작에 대한 빠른 가이드
Dec 26, 2023 pm 02:23 PM
CSV 형식 파일을 열고 처리하는 방법을 빠르게 배우십시오. 데이터 분석 및 처리의 지속적인 개발로 인해 CSV 형식은 널리 사용되는 파일 형식 중 하나가 되었습니다. CSV 파일은 다양한 데이터 필드가 쉼표로 구분되어 있는 간단하고 읽기 쉬운 텍스트 파일입니다. 학술 연구, 비즈니스 분석, 데이터 처리 등 CSV 파일을 열고 처리해야 하는 상황에 자주 직면하게 됩니다. 다음 가이드는 CSV 형식 파일을 열고 처리하는 방법을 빠르게 배우는 방법을 보여줍니다. 1단계: CSV 파일 형식 이해하기 먼저,
PHP에서 특수 문자를 처리하고 작은따옴표를 변환하는 방법을 알아보세요.
Mar 27, 2024 pm 12:39 PM
PHP 개발 과정에서 특수 문자를 처리하는 것은 일반적인 문제이며, 특히 문자열 처리에서는 특수 문자가 이스케이프되는 경우가 많습니다. 그중에서도 특수 문자를 작은따옴표로 변환하는 것은 상대적으로 일반적인 요구 사항입니다. 왜냐하면 PHP에서는 작은따옴표가 문자열을 래핑하는 일반적인 방법이기 때문입니다. 이 기사에서는 PHP에서 특수 문자 변환 작은따옴표를 처리하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. PHP에서 특수 문자에는 작은따옴표('), 큰따옴표("), 백슬래시() 등이 포함되지만 이에 국한되지는 않습니다.
win7에서 win10으로의 업그레이드가 실패한 후 문제를 해결하는 방법은 무엇입니까?
Dec 26, 2023 pm 07:49 PM
우리가 사용하는 운영 체제가 win7인 경우 일부 친구는 업그레이드할 때 win7에서 win10으로 업그레이드하지 못할 수도 있습니다. 편집자는 문제가 해결될 수 있는지 확인하기 위해 다시 업그레이드를 시도해 볼 수 있다고 생각합니다. 자세한 내용은 편집자가 어떻게 했는지 살펴보겠습니다~ win7이 win10으로 업그레이드하지 못한 경우 방법 1: 1. 먼저 드라이버를 다운로드하여 컴퓨터를 Win10으로 업그레이드할 수 있는지 평가하는 것이 좋습니다. 업그레이드 후 드라이버 테스트를 이용하여 드라이버에 이상이 있는지 확인하고 원클릭으로 수정하세요. 방법 2: 1. C:\Windows\SoftwareDistribution\Download 아래의 모든 파일을 삭제합니다. 2.win+R 실행 "wuauclt.e
JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축
Dec 17, 2023 pm 05:13 PM
JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법
Jan 05, 2024 pm 01:37 PM
JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가
