三级联动选项卡

最新推荐文章于 2020-05-22 14:04:53 发布

shuffle_boy

最新推荐文章于 2020-05-22 14:04:53 发布

阅读量561

点赞数 1

分类专栏： javascript 文章标签： js html5 javascript css css3

本文章版权归shuffleboy所有，转载请注明出处

本文链接：https://blog.csdn.net/shuffle_boy/article/details/105389159

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三级联动</title>
</head>
<body>
	<form action="">
	  <select name="" id="xuexiao">
       <option value="-1">请选择</option>
      </select>  
      <select name="" id="yuanxi"></select>
      <select name="" id="zhuanye"></select>
	</form>
	<script>
    var xuexiaoArr=['四川工商职业技术学院','四川大学','西南交通大学'];
    var yuanxiArr=[
           [['信息工程系'],['轻工工程系'],['设计艺术系'],['经济管理系'],['机电工程系']],
           [['水利电力学院']],
           [['轨道交通学院'],['土木工程学院']]
           
    ];
    var zhuanyeArr=[
        [['软件技术专业','大数据专业','网络技术专业','电子商务专业'],['印刷技术'],['园艺设计'],['会计'],['机械自动化']],
        [['软件工程'],['幼儿教育']],
        [['轨道交通'],['生物和技术','机械数字化']]
    ];
	function createOption(obj,data){
		for(var i in data){
			var op=new Option(data[i],i);
	    obj.options.add(op);
		}
	}
	var xuexiao=document.querySelector('#xuexiao');
	    createOption(xuexiao,xuexiaoArr);
	var yuanxi=document.querySelector('#yuanxi');
	    xuexiao.onchange=()=>{
	    	yuanxi.options.length=0;
	    	createOption(yuanxi,yuanxiArr[xuexiao.value]);
	    	if(xuexiao.value>=0){
	    		yuanxi.onchange();
	    	}else{
	    		zhuanye.options.length=0;
	    	}
	    }
	var zhuanye=document.querySelector('#zhuanye');
	    yuanxi.onchange=()=>{
	    	zhuanye.options.length=0;
	    	createOption(zhuanye,zhuanyeArr[xuexiao.value][yuanxi.value]);
	    }
	    console.log(xuexiao.value)
	</script>
</body>
</html>

写的很水，参考看看就行，不喜勿喷！！！

shuffle_boy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
三级联动选项卡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三级联动</title></head><body> <form action=""> <select name="" id="xu...
复制链接

扫一扫

专栏目录