JavaScript development of three-level linkage front-end
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>三級(jí)聯(lián)動(dòng)</title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div>
請選擇地區(qū)：
<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="">--請選擇區(qū)--</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.
