说明:数据部分是通过爬虫爬下来的,需要请到劲枫的csdn下载
可以实现三级联动选择,代码可以直接使用。数据也是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 = { 劲枫的csdn里面的dict1.json拷贝过来 } var class2 = { 劲枫的csdn里面的dict2.json拷贝过来 } var class3 = { 劲枫的csdn里面的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>