用jQuery做个二级分类，先放一下效果图
代码里写了注释，贴一下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</script>
</head>
<body>
<p>老万餐厅</p>
<select id="add"></select>
<select id="add2">
<option>请选择</option>
</select>
<p id="p"></p>
</body>
<script>
//要求：二级分类
//1.在点击下拉选项的时候出现二级选项
$(function () {
//数组，放获取到的参数链表
var addFood = [{
id: 1,
name: '甜点',
userId: [{
id: 1,
name: '蛋糕',
}, {
id: 2,
name: '甜甜圈',
}, {
id: 3,
name: '巧克力'
}]
}, {
id: 2,
name: '主食',
userId: [{
id: 1,
name: '咖喱饭',
}, {
id: 2,
name: '可乐鸡',
}, {
id: 3,
name: '蛋包饭'
}]
}, {
id: 3,
name: '冷饮',
userId: [{
id: 1,
name: '冰镇可乐',
}, {
id: 2,
name: '深海柠檬',
}, {
id: 3,
name: '草莓奶昔'
}]
}];
//添加方法，第一个值表示添加的数据，第二个表示添加到哪里
addOption(addFood, $("#add"));
//当第一个add被点击的时候触发函数
//option:selected意思是获取到他点击的option
//后面的index是返回他的下标然后进行比较，下标为几展示addFood数组的第几个内容
$('#add').click(function () {
var index = $('#add option:selected').index();
if (index === 1) {
$("#add2").empty();
addOption(addFood[0].userId, $("#add2"));
} else if (index === 2) {
$("#add2").empty();
addOption(addFood[1].userId, $("#add2"));
} else if (index === 3) {
$("#add2").empty();
addOption(addFood[2].userId, $("#add2"));
}else {
$("#add2").empty();
$("#add2").append('<option>请选择</option>');
$('#p').text('请选择');
}
});
//展示下方判断点击内容的语句
$('#add2').click(function () {
var index = $('#add option:selected').index();
if (index === 0 ){
} else {
$('#p').text("您选择的是：" + $('#add2 option:selected').text());
}
});
//最关键的函数，表示拼接好字符串并添加显示在HTML上
function addOption(addFood, $a) {
var src = "<option>请选择</option>";
var b = addFood.length - 1;
for (let i = 0; i <= b; i++) {
src += '<option>' + addFood[i].name + '</option>' + "";
}
$a.append(src);
}
})
</script>
</html>总结：
1.给他一个ID命名方便去查询，在他的数组内添加二级分类再以ID命名分类，如果是三级分类也同理都是一样的
2.有了数据之后就可以调用我们jQuery的addend()方法添加我们要展示在上面的内容。
3.添加方法有了之后要判断添加到哪里以及判断用户点击的是展示什么样的内容，这时候就需要用option:selected获取
基本上分为以上三点，谢谢大家~
