<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="province" onchange="func1(this)">
</select>
<select id="city"></select>
<script>
data = {
"广东省": ["广州", "佛山"],
"北京": ["海淀", "廊坊"],
"海南省": ["三亚", "海口"]
};
var pro = document.getElementById("province");
var city = document.getElementById("city");
for (var i in data) {
var option_pro = document.createElement("option");
option_pro.innerHTML = i;
pro.appendChild(option_pro);
}
function func1(self) {
//console.log((self.options[self.selectedIndex]).innerHTML);
var choice = (self.options[self.selectedIndex]).innerHTML;
city.options.length = 0;
for (var i in data[choice]) {
var option_city = document.createElement("option");
option_city.innerHTML = data[choice][i];
city.appendChild(option_city);
}
}
</script>
</body>
</html>
Vue secondary linkage
Guess you like
Origin blog.csdn.net/qq_45424679/article/details/114551956
Recommended
Ranking