实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级菜单联动</title>
</head>
<body>
<label for="spfl">商品分类</label>
<select name="spfl" id="spfl"></select>
<label for="pinpai">商品名称</label>
<select name="pinpai" id="pinpai"></select>
<label for="xinghao">商品型号</label>
<select name="xinghao" id="xinghao"></select>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
$(function () {
var spfl = $('#spfl');
var pinpai = $('#pinpai');
var xinghao = $('#xinghao');
$.getJSON('inc/fl.json', function (data, sataus) {
//console.log(data);
var option = '<option value="">选择商品</option>';
if (sataus === 'success') {
$.each(data, function (index) {
console.log(data[index]);
option += '<option value="' +data[index].flid+ '" > ' +data[index].flname+ ' </option>';
});
spfl.html(option);
}
});
spfl.on('change',function () {
$.getJSON('inc/pm.json', function (data, sataus) {
console.log(data);
var option = '<option value="">选择商标</option>';
if (sataus === 'success') {
$.each(data, function (index) {
if(data[index].flid===spfl.val()){
option += '<option value="' + data[index].pmid + '" > ' + data[index].pmname + ' </option>';
// console.log(data[index].pmid);
// console.log(data[index].pmname);
}
});
pinpai.html(option);
}
});
});
pinpai.on('change',function () {
$.getJSON('inc/xh.json', function (data, sataus) {
console.log(data);
var option = '<option value="">选择型号</option>';
if (sataus === 'success') {
$.each(data, function (index) {
// pm.json里面的pmid的值为：dq01 , pinpai.val():上边已给每个pinpai里面的option列表赋值（见48行）
if(data[index].pmid===pinpai.val()){
console.log(pinpai.val);
option += '<option value="' + data[index].pmid + '" > ' + data[index].pmname + ' </option>';
// console.log(data[index].pmid);
// console.log(data[index].pmname);
}
});
xinghao.html(option);
}
});
});
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例