Javascript 笔记与总结(2-12)联动菜单

时间:2022-09-01 15:54:09

联动菜单:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 300px;
height: 300px;
background: blue;
border-bottom: 1px solid black;
}
</style>
<script>
var area = [
['朝阳', '海淀', '昌平'],
['九江', '南昌', '赣州']
];
function ld(){
var select = document.getElementById("province");
var city = document.getElementById("city");
var opt = null;
if(select.value == -1){
city.innerHTML = opt;
return;
}
for(var i = 0; i < area[select.value].length; i++){
opt += "<option value="+i+">"+area[select.value][i]+"</option>";
}
city.innerHTML = opt;
}
</script>
</head>
<body>
<select name="" id="province" onchange="ld();">
<option value="-1">请选择</option>
<option value="0">北京</option>
<option value="1">江西</option>
</select>
<select name="" id="city"></select>
</body>
</html>

更多:http://www.yanshiba.com/code/liandong/index.html