使用js实现的关联表单,应用的主要知识是关于js中表单的应用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div{
width: 100px;
height: 100px;
}
select{
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<label>
<select id="province" name="province" >
<option>请选择省份</option>
<option >山东</option>
<option >福建</option>
<option >广州</option>
</select>
</label>
<select id="city">
<option>请选择城市</option>
</select>
<script type="text/javascript">
window.onload=function(){
var province=document.getElementById("province");
var city=document.getElementById("city");
var citys=[
["泰安","济南","青岛"],
["厦门","泉州","莆田"],
["广东","东莞","新乡"]
];
province.onchange=function(){
var procity=citys[province.selectedIndex-1];
city.options.length=1;
for(var i=0;i<procity.length;i++){
city.add(new Option(procity[i],procity[i]));
city.children[0].setAttribute("selected","selected");
}
}
}
</script>
</body>
</html>
如上:
知识点:html中表单选项的应用