3단계 연계 프론트엔드 JavaScript 개발

이번 섹션에서는 프론트엔드 코드를 소개하는데, 비교적 간단하지만 주의가 필요한 부분도 있습니다.

드롭다운 메뉴의 라벨은 선택입니다. 이 라벨 아래의 옵션 라벨의 기능은 다음과 같습니다.

옵션 요소는 드롭다운 목록의 옵션(항목)을 정의합니다.

옵션 요소는 선택 요소 안에 있습니다.

<!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단계 연계라고 합니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <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>

코드 재설정

자동운전

제출하다

시사 Clear