说明：数据部分是通过爬虫爬下来的，需要请到劲枫的博客下载

可以实现三级联动选择，代码可以直接使用。数据也是json格式，下载下来就可用，不涉及数据库，单纯的前端实现方式，效率更高，对服务器压力更小

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><link href="http://lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head><style>* {margin: 0;padding: 0;}ul li {list-style: none;}/*省和学校的选择框样式*/.majorClass {position: absolute;background-color: aliceblue;width: 580px;/*height: 255px;*/border: 1px solid #72B9D7;top: 45px;left: 0;z-index: 1000;}.majorClass .majorSelect {width: 550px;height: 30px;margin: 6px 0 6px 15px;}.majorClass .majorSelect select {width: 136px;/*display: inline-block;*/height: 30px;line-height: 30px;color: #555;background-color: #fff;background-image: none;border: 1px solid #ccc;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}.majorClass .majorSelect input {/*display: inline-block;*/width: 230px;height: 30px;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;color: #555;background-color: #fff;background-image: none;border: 1px solid #ccc;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}.majorClass .majorList {padding: 5px 15px;margin-bottom: 6px;font: 12px "微软雅黑";background: #FFF;width: 550px;height: 205px;margin-left: 15px;overflow-y: auto;border: 1px solid #72B9D7;}.majorClass .majorList ul {width: 510px;}.majorClass .majorList ul li {float: left;width: 158px;height: 22px;margin-left: 6px;padding-left: 6px;line-height: 22px;cursor: pointer;}.majorClass .majorList ul li.DoubleWidthLi {width: 328px;}.majorClass .majorList ul li:hover {background: #72B9D7;}.majorClass .button {width: 100%;height: 40px;margin-top: 5px;}.majorClass .button button {float: right;height: 30px;margin-right: 20px;padding: 4px 10px;border: none;font-weight: 600;/*cursor: pointer;*/}/*省和学校的选择框样式*/</style>
<body>
<div class="container stage"><div class="input-group input-group-lg " style="width: 400px;"><span class="input-group-addon">专业：</span><input id="majorName" name="major" readonly style="background-color: #fff;" type="text" class="form-control form-control-new" placeholder="Major"><!--输入的input id 设置为majorName--><!--显示专业--><div id="majorClass" class="majorClass" hidden><div id="majorSelect" class="majorSelect"><select id="select1"></select><select id="select2"></select><span>可选择其他手动填写</span><input type="text" hidden><div class="button" style="display: inline"><button type="button" class="btn btn-info" value="1" flag="1">确定</button><button type="button" class="btn" value="0" flag="0">取消</button></div></div><div class="majorList"><ul></ul></div></div><!--显示专业--></div></div></body>
</html><script src="http://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
<script>var class1 = {下载的数据里面的dict1.json拷贝过来}var class2 = {下载的数据里面的dict2.json拷贝过来}var class3 = {下载的里面的ditc3.json拷贝过来}$("#majorName").focus(function () {$(".majorClass").show();});initClass_1();//初始化一级分类initClass_2();//初始化二级分类initClass_3()//切换一级分类的事件$("#majorSelect #select1").change(function () {if ("0000" != $(this).val()) {$(".majorSelect span").show();$(".majorSelect input").hide();$("#majorSelect select:nth-of-type(2)").show()$(".majorList").show()var selectedClass1_value = $(this).val();//获取选的class1的value// console.log(selectedClass1_value)//初始化二级分类列表initClass_2(selectedClass1_value);var selectedClass2_value = $("#majorSelect #select2").val();//获取选的class2的value 0101 0201 0202....// console.log(selectedClass2_value)var class3_arr_temp = [];//初始化三级专业列表for (var k in class3) {if (k.substr(0, 4) == selectedClass2_value) {class3_arr_temp[k] = class3[k]}}initClass_3(class3_arr_temp);//刷数据到ul li 中} else {$(".majorList ul").html("");$(".majorSelect span").hide();$(".majorSelect input").show();$("#majorSelect select:nth-of-type(2)").hide()$(".majorList").hide()}})//切换二级分类的事件$("#majorSelect #select2").change(function () {var selectedClass2_value = $(this).val();//获取选的class2的value 0101 0201 0202....// console.log(selectedClass2_value)var class3_arr_temp = [];//初始化三级专业列表for (var k in class3) {if (k.substr(0, 4) == selectedClass2_value) {class3_arr_temp[k] = class3[k]}}initClass_3(class3_arr_temp);//刷数据到ul li 中})function initClass_1() {//初始化一级分类的下拉列表var SelectStr_class1 = "";for (var k in class1) {SelectStr_class1 += "<option value='" + k + "'>" + class1[k] + "</option>" //进行select下拉列表字符串拼接}$("#majorClass #select1").html(SelectStr_class1);}function initClass_2() {//实现重载功能，因为第一次初始化的时候没有点击事件不传参数的，但是点击select的时候需要传递当前点击的值用来构建第二个下拉列表var len= arguments.length;//获取传递的参数个数var selectedClass1_value = ""if(len == 0){selectedClass1_value = $("#majorClass #select1").val();//获取选的省的value 01 02 03 ...// console.log("0")}else if(len ==1){selectedClass1_value = arguments[0]// console.log("1")}//初始化二级分类列表var SelectStr_class2 = ""var class2_arr = [];//初始化二级专业列表for (var k in class2) { //选择对应的class2中的数据存到class2_arr[]if (k.substr(0, 2) == selectedClass1_value) {class2_arr[k] = class2[k]}}for (var k in class2_arr) {//从class2_arr将数据刷出来SelectStr_class2 += "<option value='" + k + "'>" + class2_arr[k] + "</option>" //进行select下拉列表字符串拼接// console.log(k)}$("#majorClass #select2").html(SelectStr_class2);}function initClass_3() {var len= arguments.length;//获取传递的参数个数var class3_arr = [];//初始化三级专业列表if(len == 0){var selectedClass2_value = $("#majorClass #select2").val();//获取选的class2的value 0101 0201 0202....for (var k in class3) {if (k.substr(0, 4) == selectedClass2_value) {class3_arr[k] = class3[k]}}}else if(len ==1){class3_arr = arguments[0]//传递了参数获取第一个参数}var majorULlistr = "" //拼接专业的html代码for (var i in class3_arr) {// console.log(class2_arr[i])if (class3_arr[i] > 13) {majorULlistr += "<li class='DoubleWidthLi'>" + class3_arr[i] + "</li>"} else {majorULlistr += "<li>" + class3_arr[i] + "</li>"}}$(".majorList ul").html(majorULlistr)//拼接学校的html代码//学校列表点击事件$(".majorList ul li").bind("click", function () {$("#majorName").val($(this).html());$("#majorClass").hide();})}//按钮点击事件$(".button button").bind("click", function () {var flag = $(this).attr("flag");// var btnvalue = $(this).val()// console.log(typeof (btnvalue))if ("0" == flag) {$("#majorClass").hide()} else if ("1" == flag) {var selectedClass1_value = $("#majorSelect #select1").val()if ("0000" == selectedClass1_value) {$("#majorName").val($("#majorSelect input").val());}$(".majorClass").hide()}})
</script>

jQuery实现选择“学科门类”、“学科大类（一级学科）”、“专业”（二级学科）实现三级联动相关推荐

计算机学院学生划分哪些专业,计算机科学与工程学院2020年大类招生学生专业分流工作实施方案...
为了做好2019级学生专业分流工作,根据<东北大学关于大类招生本科生专业分流工作的指导意见>(东大教字[2014]57号).<东北大学关于开展2020年大类招生学生专业分流工作的通知 ...
电子科技大学中山学院计算机类分流,电子科技大学中山学院2019年大类招生及专业分流办法解读...
2019年,学校的电子信息学院.计算机学院各专业均纳入学科大类招生(2+2联合培养项目除外),即按照电子信息类(含电子信息工程.电子科学与技术.通信工程.光电信息科学与工程).计算机类(含计算机科学与 ...
电子科技大学中山学院计算机类分流,2019年电子科技大学中山学院大类招生及专业分流办法解读...
2019年,学校的电子信息学院.计算机学院各专业均纳入学科大类招生(2+2联合培养项目除外),即按照电子信息类(含电子信息工程.电子科学与技术.通信工程.光电信息科学与工程).计算机类(含计算机科学与 ...
电子科技大学计算机专业分班,关于电子科技大学中山学院2018年大类招生及专业分班原则的说明...
2018年,电子科技大学中山学院首次实行大类招生,涉及计算机类和设计学类共7个专业.具体情况如下: 具体来说,把计算机学院的"计算机科学与技术"."软件工程". ...
【Python爬虫】图文教学爬取并汇总至Excel：高考志愿中的所有专业大类、具体专业的各项信息
1 本文背景近期在做一个高考志愿智能决策系统,并想引入专业介绍功能,此系统的用户提供志愿推荐的同时,来普及各种专业的信息,方便用户了解了多数专业的具体情况后,再根据系统的推荐,来得到比较理性并且适合 ...
中山大学计算机专业二级学科,1.中山大学具有硕士学位授权一级学科、二级学科一览表-附件1.doc...
1.中山大学具有硕士学位授权一级学科.二级学科一览表-附件1.doc 附件1 中山大学具有硕士学位授权一级学科.二级学科一览表中山大学具有硕士学位授权一级学科一级学科代码一级学科名称一级学科代码一 ...
土木工程和计算机哪个好就业前景,土木类什么专业最吃香？大学土木大类里哪个专业好？附就业前景...
选择科目测一测我能上哪些大学选择科目领取你的专属报告 > 选择省份关闭请选择科目确定 v> 虽然近几年土木类专业的火热程度远不及计算机类专业和人工智能等专业,但是作为火了十几年 ...
计算机科学与技术万金油专业,盘点工学大类里的“万金油”专业
原标题:盘点工学大类里的"万金油"专业教育部2012年最新修订的本科生专业名录中把专业重新进行了从学科门类到专业类和专业的划分,共计12大学科门类,分别是理.工.农.医 ,管.教 ...
计算机科学与技术专业机遇与挑战,科学网—填报专业大类志愿：机遇与挑战 - 雒运强的博文...
2020年的高考结束了,不久就要出分,接着考生就要选择大学和专业了.可是,有一些大学说按专业大类招生,究竟什么是专业大类.这样招生好不好呢? 专业大类有很多,如中国语言文学.历史学.考古学.戏剧影视文 ...
清华化学北航学计算机怎么选填志愿,2017年清华、北航多校采用大类招生，高考志愿该如何填报？...
继清华大学宣布所有本科专业开启大类招生后,据了解,2017年,中国人民大学.北京航空航天大学.北京科技大学.北京化工大学等多所高校都将推行大类招生.新高考改革浪潮中,选考科目将直接与大学专业挂钩,高校 ...

jQuery实现选择“学科门类”、“学科大类（一级学科）”、“专业”（二级学科）实现三级联动

说明：数据部分是通过爬虫爬下来的，需要请到劲枫的博客下载

jQuery实现选择“学科门类”、“学科大类（一级学科）”、“专业”（二级学科）实现三级联动相关推荐

最新文章

热门文章