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()"是在选择市之后触发区的下拉菜单的选项。

这也就是所谓的联动,因为省市区有三级关系,所以叫三级联动。

继续学习
||
<!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>
提交重置代码