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>三级联动</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.

Continuing Learning
||
<!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>
submitReset Code
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!