In der tatsächlichen JavaScript-Projektentwicklung benötigen wir häufig eine dreistufige Verknüpfung, z. B. die Auswahl von Provinzen und Gemeinden, die Auswahl der dreistufigen Warenklassifizierung usw. Heute erklären wir, wie JavaScript die dreistufige Verknüpfung implementiert, und teilen den JavaScript-Quellcode mit Ihnen! Wenn Sie mit JavaScript zur Implementierung der Drei-Ebenen-Verknüpfung nicht vertraut sind, können Sie bei uns einen Blick darauf werfen!
Wissenspunkte:
1. json.parse() konvertiert den JSON-Format String in Object. json.stringify() konvertiert das Objekt in einen String im JSON-Format.
2. Wichtiges Attribut selectedIndex: Gibt die Indexnummer der ausgewählten Option der Dropdown-Liste zurück.
3. onchangeEreignis
Das Folgende ist der Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select id="province">
<!-- <option>北京</option>
<option>天津</option> -->
</select>
<select id="city"></select>
<select id="count"></select>
<script type="text/javascript" src="china.js"></script>
<script type="text/javascript">
var province = document.getElementById("province");
var city = document.getElementById("city");
var count = document.getElementById("count");
var chinaArea = JSON.parse(chinaArea);//将字符串格式的json数据转换成对象
// var chinaArea = eval("("+chinaArea+")");
// var chinaArea = new Function("return " + chinaArea)();
//1.遍历省份
var provinceList = chinaArea.china.province;//数组
for(var i = 0 ; i < provinceList.length; i++) {
var option = document.createElement("option");
option.innerHTML = provinceList[i]["-name"];
province.appendChild(option);
}
province.onchange = function() {
//选择省份之后，市区跟着变化
cityData();
countData();
}
cityData();
//市区的数据填充
var sIndex = 0;
var cityIndex = 0;
function cityData() {
//清除原来的市区信息
city.innerHTML = "";
//2.遍历市区
sIndex = province.selectedIndex;//设置或返回下拉列表备选选项的索引号。
for(var j = 0; j < provinceList[sIndex].city.length;j++) {
var option = document.createElement("option");
option.innerHTML = provinceList[sIndex].city[j]["-name"];
city.appendChild(option);
}
}
//县区数据填充
function countData() {
//清除原来的县区信息
count.innerHTML = "";
//
cityIndex = city.selectedIndex;
var countList = chinaArea.china.province[sIndex].city[cityIndex].county;
for(var k = 0; k < countList.length; k++) {
var option = document.createElement("option");
option.innerHTML = countList[k]["-name"];
count.appendChild(option);
}
}
city.onchange = function() {
countData();
}
countData();
</script>
</body>
</html>Sie kann es kombinieren Schauen Sie sich den Quellcode und die Wissenspunkte an! Versuchen Sie es selbst zu schreiben und stärken Sie Ihr Wissen!
Verwandte Empfehlungen:
So implementieren Sie den dreistufigen Verknüpfungseffekt von jQuery
Das obige ist der detaillierte Inhalt vonEinfache Implementierung einer dreistufigen Verknüpfung mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
