- Chapter1JavaScript development of three-level linkage function
- Introduction to the three...
- JavaScript development of...
- Preparations for three-le...
- JavaScript development th...
- Full code display of thre...
This section introduces the front-end code, which is relatively simple, but there are also things that need attention.
The label of the drop-down menu is select. The function of the option label under this label is:
The option element defines an option (an item) in the drop-down list.
The option element is located inside the select element.
<!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>This is the front-end code of the function. The style is relatively simple, and the main thing is that it can realize the function.
Some people may not understand onchange="showCity()". What is this and how to write it here.
This is a click event bound to trigger the city drop-down menu option after clicking to select a province.
Similarly, onchange="showDist()" is an option to trigger the drop-down menu of the area after selecting the city.
This is also the so-called linkage. Because provinces and municipalities have three-level relationships, it is called three-level linkage.
Next Section