二级联动 类似于选择城市 省份-城市
技术点:
onchange 如果上级选择框发生改变:
<select id="onel" onchange="change()" >
清空:
two.options.length = 1;
添加option:
var one = document.getElementById("onel");
for(var i in course){
one.add(new Option(i,i),null);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index-02</title>
<script>
var course = new Array();
course['初级'] =['java基础上','java基础下','java基础项目'];
course['中级'] = ['web前端','web后端','web项目'];
course['高级'] = ['spring','springmvc','mybatis','分步式处理','大数据'];
window.onload = function(){
var one = document.getElementById("onel");
for(var i in course){
one.add(new Option(i,i),null);
}
}
function change(){
var two = document.getElementById("twol");
var val = document.getElementById("onel").value;
two.options.length = 1;
for(var i in course){
if(i == val){
for(var j in course[i]){
two.add(new Option(course[i][j],course[i][j]),null);
}
}
}
}
</script>
</head>
<body>
<span>一级选择</span>
<select id="onel" onchange="change()" >
<option>请选择</option>
</select>
<span>二级选择</span>
<select id="twol" >
<option>请选择</option>
</select>
</body>
</html>