JavaScript를 사용하여 무한 계단식 메뉴 처리 구현
- WBOY원래의
- 2023-06-15 21:09:481737검색
무한 계단식 메뉴는 매우 일반적인 프런트 엔드 상호 작용 방법이며 많은 시나리오에서 널리 사용됩니다. 이 기사에서는 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 코드 구현- 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!