效果图： 代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" src="js/jquery-1.4.js" ></script> <body> <div class="filter fr"> <select id="gzsj" onchange="gzsj();"> <option value="">请选择</option> <option value="1">公证机构</option> <option value="2">公证人员</option> <option value="3">案件数量</option> </select> <span id="spandemo"> <select id="testsj" onchange="ajslsj();"> <option value="1">近5年</option> <option value="2">近12月</option> <option value="3">近10月</option> </select> </span> </div> </body> <script type="text/javascript"> //当页面加载完毕 隐藏<span id="spandemo">标签内容 $(function () { document.getElementById("spandemo").style.display="none";//设置spandemo标签隐藏 }); //选择第1个下拉框触发事件 function gzsj(){ var gzsj = document.getElementById("gzsj").value; if(gzsj==1){ //公证机构 document.getElementById("spandemo").style.display="none";//设置spandemo标签隐藏 //发送ajax请求 // jQuery.ajax({ // type: 'POST', // url: "${base}/private/showData/gz/showgzjgsl", // dataType: "json", // success: function (data) { // console.log(data) // jgslzzt(data); //柱状图 机构数量 // } // }); }else if(gzsj==2){ //公证人员 document.getElementById("spandemo").style.display="none";//设置spandemo标签隐藏 // jQuery.ajax({ // type: 'POST', // url: "${base}/private/showData/gz/showgzrysl", // dataType: "json", // success: function (data) { // console.log(data) // jgryslzzt(data); //柱状图 机构数量 // } // }); }else if(gzsj==3){ document.getElementById("spandemo").style.display="inline"; //设置spandemo标签显示 document.getElementById("testsj").value=1; //默认近5年 // jQuery.ajax({ // type: 'POST', // url: "${base}/private/showData/gz/showgzajsl", // dataType: "json", // success: function (data) { // console.log(data) // gzajslzzt(data); //柱状图 机构数量 // } // }); }else{ // jQuery.ajax({ // type: 'POST', // url: "${base}/private/showData/gz/showgzjgsl", // dataType: "json", // success: function (data) { // console.log(data) // jgslzzt(data); //柱状图 机构数量 // } // }); } } //第2个下拉框触发事件 function ajslsj(){ var testsj = document.getElementById("testsj").value; if(testsj==1){ //近5年 alert('近5年') }else if(testsj==2){ //近12月 alert('近12月') }else { //近10月 alert('近10月') } } </script> </html>作为一名后端开发工程师，前端使用的技能也算是零基础，慢慢积累，慢慢沉淀。
