二级联动 省份 城市 -HTML


二级联动 类似于选择城市 省份-城市

技术点:

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>

猜你喜欢

转载自blog.csdn.net/qq_42108487/article/details/80875202