Collection
Collection
三级联动菜单
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动菜单</title>
</head>
<body>
<h3>商品管理</h3>
<label for="product">品名</label>
<select name="" id="product"></select>
<label for="brand">***</label>
<select name="" id="brand"></select>
<label for="model">型号</label>
<select name="" id="model"></select>
<p id="productDetail"></p>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
$(function () {
$.getJSON('inc/1.json',function (data) {
// console.log(data);
var option = '<option value="">选择(品名)</option>';
$.each(data,function (index) {
option+='<option value="'+data[index]['productId']+'">'+data[index]['productName']+'</option>';
});
// console.log(option);
$('#product').html(option);
});
//填充***
$('#product').change(function () {
$.getJSON('inc/2.json',function (data) {
// console.log(data);
var option = '<option value="">选择(***)</option>';
$.each(data,function (index) {
if(data[index]['productId']===parseInt($('#product').val())){
option+='<option value="'+data[index]['brandId']+'">'+data[index]['brandName']+'</option>';
}
});
// console.log(option);
$('#brand').html(option);
});
});
//填充型号
$('#brand').change(function () {
$.getJSON('inc/3.json',function (data) {
// console.log(data);
var option = '<option value="">选择(型号)</option>';
$.each(data,function (index) {
if(data[index]['brandId']===parseInt($('#brand').val())){
option+='<option value="'+data[index]['modelId']+'">'+data[index]['modelName']+'</option>';
}
});
// console.log(option);
$('#model').html(option);
});
});
$('#model').change(function () {
// console.log($(this).find(':selected').text());
$('#productDetail').html($(this).find(':selected').text())
.css('color','red');
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
1.json
[
{
"productId": 1,
"productName": "笔记本电脑"
},
{
"productId": 2,
"productName": "手机"
}
]点击 "运行实例" 按钮查看在线实例
2.json
[
{
"brandId": 1,
"brandName": "华硕",
"productId":1
},
{
"brandId": 2,
"brandName": "联想",
"productId":1
},
{
"brandId": 3,
"brandName": "戴尔",
"productId":1
},
{
"brandId": 4,
"brandName": "华为",
"productId":2
},
{
"brandId": 5,
"brandName": "小米",
"productId":2
},
{
"brandId": 6,
"brandName": "苹果",
"productId":2
},
{
"brandId": 7,
"brandName": "OPPO",
"productId":2
}
]点击 "运行实例" 按钮查看在线实例
3.json
[
{
"modelId": 1,
"modelName": "华硕顽石(ASUS) 五代FL8000UF",
"brandId": 1
},
{
"modelId": 2,
"modelName": "华硕(ASUS) ***堡垒7 15.6英寸",
"brandId": 1
},
{
"modelId": 3,
"modelName": "华硕(ASUS)***堡垒7九代英特尔酷睿i7",
"brandId": 1
},
{
"modelId": 4,
"modelName": "联想(Lenovo)拯救者Y7000P",
"brandId": 2
},
{
"modelId": 5,
"modelName": "联想(Lenovo)330C 英特尔酷睿i5",
"brandId": 2
},
{
"modelId": 6,
"modelName": "联想(Lenovo)小新14英寸",
"brandId": 2
},
{
"modelId": 7,
"modelName": "戴尔灵越14 燃 14英寸英特尔酷睿i5",
"brandId": 3
},
{
"modelId": 8,
"modelName": "戴尔DELL游匣G3 英特尔酷睿i5 ",
"brandId": 3
},
{
"modelId": 9,
"modelName": "戴尔DELL游匣G315.6英寸",
"brandId": 3
},
{
"modelId": 10,
"modelName": "华为 HUAWEI P30 Pro ",
"brandId": 4
},
{
"modelId": 11,
"modelName": "华为 HUAWEI P20 ",
"brandId": 4
},
{
"modelId": 12,
"modelName": "华为 HUAWEI Mate 20 ",
"brandId": 4
},
{
"modelId": 13,
"modelName": "小米 红米Redmi Note7 ",
"brandId": 5
},
{
"modelId": 14,
"modelName": "小米8 ",
"brandId": 5
},
{
"modelId": 15,
"modelName": "小米 红米6A ",
"brandId": 5
},
{
"modelId": 16,
"modelName": "Apple iPhone 8 ",
"brandId": 6
},
{
"modelId": 17,
"modelName": "Apple iPhone 7 ",
"brandId": 6
},
{
"modelId": 18,
"modelName": "Apple iPhone 6 ",
"brandId": 6
},
{
"modelId": 19,
"modelName": "OPPO K1 ",
"brandId": 7
},
{
"modelId": 20,
"modelName": "OPPO R17 ",
"brandId": 7
},
{
"modelId": 21,
"modelName": "OPPO R15x",
"brandId": 7
}
]点击 "运行实例" 按钮查看在线实例
