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()"是在选择市之后触发区的下拉菜单的选项。
这也就是所谓的联动,因为省市区有三级关系,所以叫三级联动。
neue Datei
<!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>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)
















