以前做项目时写的JQ多级联动，最近要使用到，就翻出来记录在这里了，以后或许用的到。
我使用的方法是把数据储存在了数组里，然后循环数组列出菜单列表，演示效果如下：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="select.js"></script>
<style>
body{ text-align: center; padding-top: 100px; background: #f5f5f5; }
select{ height: 30px; line-height: 30px; padding: 0 8px; margin-left: 10px; border: none; background: #fff; color: #666; }
</style>
</head>
<body>
<select name="s1_type" id="s1_type" class="jisuan-select">
<option value="">资质类型</option>
</select>
<select name="s1_major" id="s1_major" class="jisuan-select">
<option value="">资质专业</option>
</select>
<select name="s1_grade" id="s1_grade" class="jisuan-select">
<option value="">资质等级</option>
</select>
<select name="s1_num" id="s1_num" class="jisuan-select">
<option value="">数值</option>
</select>
</body>
</html>
JQ代码：
// JavaScript Document
var demand_jisuan = new Array();
demand_jisuan = new Array(
new Array("施工总承包",
new Array("建筑工程",
new Array("测试一级","12","30","50","150","3","12","测试"),
new Array("二级","12","15","30","75","3","12","12"),
new Array("三级","5","6","15","30","3","12","12")
),
new Array("公路工程",
new Array("一级","15","75","25","50","3","15","15"),
new Array("二级","15","50","15","30","3","15","15"),
new Array("三级","8","15","8","15","3","8","8")
),
new Array("铁路工程",
new Array("一级","15","75","50","200","3","15","15"),
new Array("二级","8","40","30","100","3","8","8"),
new Array("三级","3","20","20","50","3","3","3")
),
new Array("港口与航道工程",
new Array("一级","15","60","25","75","3","15","15"),
new Array("二级","8","30","15","50","3","8","8"),
new Array("三级","5","10","10","30","3","5","5")
),
new Array("水利水电工程",
new Array("一级","15","60","50","70","3","15","15"),
new Array("二级","15","30","30","40","3","15","15"),
new Array("三级","8","10","15","20","3","8","8")
),
new Array("电力工程",
new Array("一级","15","60","50","150","3","15","15"),
new Array("二级","10","30","30","75","3","10","10"),
new Array("三级","5","10","15","30","3","5","5")
),
new Array("矿山工程",
new Array("一级","15","60","50","150","3","15","15"),
new Array("二级","12","25","30","75","3","12","12"),
new Array("三级","5","10","15","30","3","5","5")
),
new Array("冶金工程",
new Array("一级","15","80","50","150","3","15","15"),
new Array("二级","12","50","30","75","3","12","12"),
new Array("三级","7","15","15","30","3","7","7")
),
new Array("石油化工工程",
new Array("一级","15","80","25","150","3","15","15"),
new Array("二级","12","40","15","75","3","12","12"),
new Array("三级","5","10","8","30","3","5","5")
),
new Array("市政公用工程",
new Array("一级","12","30","50","150","3","12","12"),
new Array("二级","12","15","30","75","3","12","12"),
new Array("三级","5","8","15","30","3","5","5")
),
new Array("通信工程",
new Array("一级","15","60","50","120","3","15","15"),
new Array("二级","6","30","30","60","3","6","6"),
new Array("三级","0","15","15","30","3","2","2")
),
new Array("机电工程",
new Array("一级","12","60","50","150","3","12","12"),
new Array("二级","12","30","30","75","3","12","12"),
new Array("三级","5","10","15","30","3","5","5")
)
),
new Array("专业承包",
new Array("地基基础工程",
new Array("一级","6","15","30","30","3","6","6"),
new Array("二级","6","10","20","20","3","6","6"),
new Array("三级","3","8","10","15","3","3","3")
),
new Array("起重设备安装工程",
new Array("一级","0","8","15","30","3","0","2"),
new Array("二级","0","4","6","20","3","0","2"),
new Array("三级","0","2","3","10","3","0","2")
),
new Array("电子与智能化工程",
new Array("一级","6","15","20","30","3","6","6"),
new Array("二级","4","5","15","10","3","4","4")
),
new Array("消防设备工程",
new Array("一级","5","10","20","30","3","5","5"),
new Array("二级","3","6","15","20","3","3","3")
),
new Array("防水防腐保温工程",
new Array("一级","0","15","15","30","3","0","2"),
new Array("二级","0","3","10","15","3","0","2")
),
new Array("桥梁工程",
new Array("一级","10","20","30","50","3","10","10"),
new Array("二级","8","15","20","30","3","8","8"),
new Array("三级","3","8","10","20","3","3","3")
),
new Array("隧道工程",
new Array("一级","8","15","40","50","3","8","8"),
new Array("二级","8","10","25","30","3","8","8"),
new Array("三级","3","5","15","15","3","3","3")
),
new Array("钢结构工程",
new Array("一级","8","20","30","50","3","8","8"),
new Array("二级","6","10","15","20","3","6","6"),
new Array("三级","3","6","8","10","3","3","3")
),
new Array("建筑装修装饰工程",
new Array("一级","5","10","30","30","3","5","5"),
new Array("二级","3","5","10","15","3","3","3")
),
new Array("建筑机电安装工程",
new Array("一级","8","20","20","50","3","8","8"),
new Array("二级","8","10","15","30","3","8","8"),
new Array("三级","3","6","8","15","3","3","3")
),
new Array("建筑幕墙工程",
new Array("一级","6","15","20","40","3","6","6"),
new Array("二级","4","6","8","10","3","4","4")
),
new Array("古建筑工程",
new Array("一级","5","8","20","20","3","5","5"),
new Array("二级","5","5","12","12","3","5","5"),
new Array("三级","2","3","8","9","3","2","2")
),
new Array("城市及道路照明工程",
new Array("一级","8","20","30","37","3","8","8"),
new Array("二级","5","10","20","18","3","5","5"),
new Array("三级","2","5","8","12","3","2","2")
),
new Array("公路路面工程",
new Array("一级","10","40","15","20","3","10","10"),
new Array("二级","8","15","10","15","3","8","8"),
new Array("三级","5","10","5","10","3","5","5")
),
new Array("公路路基工程",
new Array("一级","10","40","15","20","3","10","10"),
new Array("二级","8","15","10","15","3","8","8"),
new Array("三级","5","10","5","10","3","5","5")
),
new Array("公路交通工程（公路安全设施）",
new Array("一级","8","20","15","20","3","8","8"),
new Array("二级","5","15","10","12","3","5","5")
),
new Array("公路交通工程（公路机电设施）",
new Array("一级","10","40","15","20","3","10","10"),
new Array("二级","5","20","10","10","3","5","5")
),
new Array("铁路电务工程",
new Array("一级","10","75","40","50","3","10","10"),
new Array("二级","6","40","20","30","3","6","6"),
new Array("三级","4","20","15","20","3","4","4")
),
new Array("铁路铺轨架梁工程",
new Array("一级","10","55","40","50","3","10","10"),
new Array("二级","5","30","20","30","3","5","5")
),
new Array("铁路电气化工程",
new Array("一级","10","50","30","50","3","10","10"),
new Array("二级","4","30","25","30","3","4","4"),
new Array("三级","5","15","15","20","3","5","5")
),
new Array("机场场道工程",
new Array("一级","8","30","30","60","3","8","8"),
new Array("二级","3","15","15","30","3","3","3")
),
new Array("民航空管工程及机场弱电系统工程",
new Array("一级","6","30","20","20","3","6","6"),
new Array("二级","3","18","12","10","3","4","4")
),
new Array("机场目视助航工程",
new Array("一级","8","20","20","30","3","8","8"),
new Array("二级","3","10","10","15","3","3","3")
),
new Array("港口与海岸工程",
new Array("一级","12","35","20","50","3","12","12"),
new Array("二级","7","25","15","30","3","7","7"),
new Array("三级","4","8","10","20","3","4","4")
),
new Array("航道工程工程",
new Array("一级","12","35","20","50","3","12","12"),
new Array("二级","7","25","15","30","3","7","7"),
new Array("三级","4","8","10","20","3","4","4")
),
new Array("通航建筑物工程",
new Array("一级","12","35","20","50","3","12","12"),
new Array("二级","7","25","15","30","3","7","7"),
new Array("三级","4","8","10","20","3","4","4")
),
new Array("港行设备安及水上交管工程",
new Array("一级","8","25","15","15","3","8","8"),
new Array("二级","8","20","10","10","3","8","8")
),
new Array("水工金属结构制作与安装工程",
new Array("一级","8","25","20","30","3","8","8"),
new Array("二级","8","15","15","20","3","8","8"),
new Array("三级","5","8","10","15","3","5","5")
),
new Array("水利水电机电安装工程",
new Array("一级","8","25","20","30","3","8","8"),
new Array("二级","8","15","15","20","3","8","8"),
new Array("三级","5","8","10","15","3","5","5")
),
new Array("河湖整治工程",
new Array("一级","8","25","20","30","3","8","8"),
new Array("二级","8","15","15","20","3","8","8"),
new Array("三级","5","8","10","15","3","5","5")
),
new Array("输变电工程",
new Array("一级","10","60","40","40","3","10","10"),
new Array("二级","8","40","30","30","3","8","8"),
new Array("三级","3","20","20","20","3","3","3")
),
new Array("核工程",
new Array("一级","8","80","50","50","3","8","8"),
new Array("二级","6","50","30","20","3","6","6")
),
new Array("海洋石油工程",
new Array("一级","15","80","50","100","3","15","15"),
new Array("二级","5","40","20","40","3","5","5")
),
new Array("环保工程",
new Array("一级","5","20","20","30","3","5","5"),
new Array("二级","5","10","15","20","3","5","5"),
new Array("三级","2","5","10","10","3","2","2")
),
new Array("预拌混凝土工程",
new Array("无资质等级","0","4","0","4","3","0","2")
),
new Array("模板脚手架工程",
new Array("无资质等级","0","5","10","20","3","0","2")
),
new Array("特种工程",
new Array("无资质等级","0","0","10","5","3","0","2")
)
),
new Array("施工劳务",
new Array("施工劳务企业资质",
new Array("无资质等级","0","0","5","50","3","0","2")
)
)
);
//console.log(demand_jisuan);
$(function(){
/* 填充第一项 */
$.each(demand_jisuan, function(index, element){
$("#s1_type").append('<option value="' + index + '">' + element[0] + '</option>');
});
var major_html = $("#s1_major").html();
var grade_html = $("#s1_grade").html();
var num_html = $("#s1_num").html();
/* 选择第一项，填充第二项 */
$("#s1_type").change(function(){
var type_id = $(this).val();
if(type_id.length != 0){
$("#s1_major").html(major_html);
$.each(demand_jisuan[type_id], function(index, element){
if(index != 0){
$("#s1_major").append('<option value="' + index + '">' + element[0] + '</option>');
}
});
}else{
$("#s1_major").html(major_html);
$("#s1_grade").html(grade_html);
$("#s1_num").html(num_html);
}
});
// 选择第二项，填充第三项
$("#s1_major").change(function(){
var type_id = $("#s1_type").val();
var major_id = $(this).val();
if(type_id.length!=0 && major_id.length!=0){
$("#s1_grade").html(grade_html);
$.each(demand_jisuan[type_id][major_id], function(index, element){
if(index != 0){
$("#s1_grade").append('<option value="' + index + '">' + element[0] + '</option>');
}
});
}else{
$("#s1_grade").html(grade_html);
$("#s1_num").html(num_html);
}
});
// 选择第三项，填充第四项
$("#s1_grade").change(function(){
var type_id = $("#s1_type").val();
var major_id = $("#s1_major").val();
var grade_id = $(this).val();
if(type_id.length!=0 && major_id.length!=0 && grade_id.length!=0){
$("#s1_num").html(num_html);
$.each(demand_jisuan[type_id][major_id][grade_id], function(index, element){
if(index != 0){
$("#s1_num").append('<option value="' + index + '">' + element + '</option>');
}
});
}else{
$("#s1_num").html(num_html);
}
});
});