- Kapitel1JavaScript-Entwicklung einer dreistufigen Verknüpfungsfunktion
- javascript开发三级联动功能简介
- JavaScript开发三级联动之前端
- JavaScript开发三级联动之准备工作
- JavaScript开发三级联动之核心JS
- JavaScript开发三级联动之全代码展示
本节介绍了前端的代码，比较简单，但是也有需要注意的地方。
下拉菜单的标签是select，这个标签下的option标签的作用：
option 元素定义下拉列表中的一个选项（一个条目）。
option 元素位于 select 元素内部。
<!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()"是在选择市之后触发区的下拉菜单的选项。
这也就是所谓的联动，因为省市区有三级关系，所以叫三级联动。
nächsten Abschnitt