JavaScriptは省都市の三級連動を実現する。
本論文の例では、js省都市の三級連動を実現する具体的なコードを共有しています。
効果図:
効果図:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
select{
width: 80px;
margin: 5px;
}
</style>
<script>
//
var provinceArr = [' ', ' ', ' '];
//
var cityArr = [
[' '],
[' ', ' ', ' '],
[' ', ' ', ' ']
];
//
var countryArr = [
[
[' ', ' ', ' ', ' ']
],
[
[' ', ' ', ' ', ' ', ' '],
[' ', ' ', ' ', ' ', ' '],
[' ', ' ', ' ']
],
[
[' ', ' ', ' ', ' '],
[' ', ' ', ' ', ' '],
[' ', ' ', ' ', ' ']
]
];
window.onload = function(){
var province = document.getElementById('province');
var city = document.getElementById('city');
var country = document.getElementById('country');
createOption(province, provinceArr);
province.onchange = function(){
city.length = 0;
createOption(city, cityArr[this.selectedIndex]);
city.onchange();
}
city.onchange = function(){
country.length = 0;
createOption(country, countryArr[province.selectedIndex][this.selectedIndex]);
}
province.onchange();
}
function createOption(obj, data){
for (var i = 0; i < data.length; i++) {
var newOption = new Option(data[i], data[i]);
obj.add(newOption, null);
}
}
</script>
</head>
<body>
<select name="" id="province"></select>
<select name="" id="city"></select>
<select name="" id="country"></select>
</body>
</html>