이번 섹션에서는 프론트엔드 코드를 소개하는데, 비교적 간단하지만 주의가 필요한 부분도 있습니다.
드롭다운 메뉴의 라벨은 선택입니다. 이 라벨 아래의 옵션 라벨의 기능은 다음과 같습니다.
옵션 요소는 드롭다운 목록의 옵션(항목)을 정의합니다.
옵션 요소는 선택 요소 안에 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div>
请选择地区：
<select name="" id="proc" onchange="showCity()">
<option value="">--请选择省--</option>
</select>
<select name="" id="city" onchange="showDist()">
<option value="">--请选择市--</option>
</select>
<select name="" id="dist">
<option value="">--请选择区--</option>
</select>
</div>
</body>
</html>이것은 함수의 프론트 엔드 코드입니다. 스타일은 비교적 간단하며, 중요한 것은 기능을 구현할 수 있다는 것입니다.
어떤 사람들은 onchange="showCity()"가 무엇인지, 여기에 어떻게 쓰는지 이해하지 못할 수도 있습니다.
이것은 지방을 선택하기 위해 클릭한 후 도시 드롭다운 메뉴 옵션을 트리거하는 클릭 이벤트입니다.
마찬가지로 onchange="showDist()"는 도시를 선택한 후 해당 지역의 드롭다운 메뉴를 실행하는 옵션입니다.
이것도 소위 연계형인데, 도와 자치단체가 3단계 관계를 갖고 있기 때문에 3단계 연계라고 합니다.
다음 섹션