Développement JavaScript d'une interface frontale de liaison à trois niveaux

Cette section présente le code front-end, qui est relativement simple, mais il y a aussi des choses qui nécessitent une attention particulière. Le label du menu déroulant

est select. La fonction du label d'option sous ce label est :

L'élément option définit une option (un élément) dans la liste déroulante. . L'élément

option est situé à l'intérieur de l'élément 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>

C'est le code frontal de la fonction. Le style est relativement simple, et l'essentiel est qu'il puisse réaliser la fonction.

Certaines personnes peuvent ne pas comprendre onchange="showCity()". Qu'est-ce que c'est et comment l'écrire ici.

Il s'agit d'un événement de clic destiné à déclencher l'option du menu déroulant Ville après avoir cliqué pour sélectionner une province.

De même, onchange="showDist()" est une option pour déclencher le menu déroulant de la zone après avoir sélectionné la ville.

C'est aussi ce qu'on appelle le lien. Parce que les provinces et les municipalités ont des relations à trois niveaux, on parle de lien à trois niveaux.

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Développement JavaScript d'une interface frontale de liaison à trois niveaux

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]