实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业: 三级联动菜单</title>
</head>
<body>
<label for="pm">品名</label>
<select name="" id="pm"></select>
<label for="pp">***</label>
<select name="" id="pp"></select>
<label for="xh">型号</label>
<select name="" id="xh"></select>
<p id="addr"></p>
<script src="../0522/static/js/jquery-3.4.1.js"></script>
<script>
$.getJSON('inc/a.json',function(data) {
var option = '<option value="">选择系统</option>';
//取回数据,叠加到option中
$.each(data,function (index) {
option += '<option value="' +data[index]['pmId']+'">'+data[index]['pmName']+'</option>';
});
//符值给pm下拉
$('#pm').html(option);
});
$('#pm').change(function() {
$.getJSON('inc/b.json',function(data) {
var option = '<option value="">选择***</option>';
//取回数据,叠加到option中
$.each(data,function (index) {
if (data[index]['pmId'] === parseInt($('#pm').val())) {
option += '<option value="' +data[index]['ppId']+'">'+data[index]['ppName']+'</option>';
}
});
console.log(option);
$('#pp').html(option);
});
});
$('#pp').change(function() {
$.getJSON('inc/c.json',function(data) {
var option = '<option value="">选择***</option>';
//取回数据,叠加到option中
$.each(data,function (index) {
if (data[index]['ppId'] === parseInt($('#pp').val())) {
option += '<option value="' +data[index]['xhId']+'">'+data[index]['xhName']+'</option>';
}
});
$('#xh').html(option);
});
});
</script>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例