摘要：三级联动菜单小代码测试，经过多次调试，中间出错N多，不知道怎么后来又好了，真是好事多磨。<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <
三级联动菜单小代码测试，经过多次调试，中间出错N多，不知道怎么后来又好了，真是好事多磨。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ajax三级联动菜单</title>
<style type="text/css">
p{float:left;height:30px;line-height:30px;margin:10px 10px;width:150px;}
select{border:1px solid #ccc;width:100px;height:30px;}
</style>
<script src="inc/jquery.min.js"></script>
</head>
<body>
<p>一级 <select name="one" id="one"></select> </p>
<p>二级 <select name="two" id="two"></select> </p>
<p>三级 <select name="three" id="three"></select> </p>
<script type="text/javascript">
$(function(){
$.getJSON('inc/one.json',function(data){
let option = '<option value="">请选择</option>';
$.each(data, function(i) {
option += '<option value="'+data[i].oneId+'">'+data[i].oneName +'</option>';
});
console.log(option);
$('#one').html(option);
});
$("#one").change(function(){
console.log($(this).find(':selected').text());
$.getJSON('inc/two.json',function(data){
let option = '<option value="">请选择</option>';
$.each(data,function(i){
if(data[i].oneId == $('#one').val()){
option += '<option value="'+data[i].twoId+'">'+data[i].twoName+'</option>';
}
});
console.log(option);
$('#two').html(option);//写入第二个菜单内容
$('#one option:first').remove();//删除第一个option
});
});
$("#two").change(function(){
console.log($(this).find(':selected').text());
$.getJSON('inc/three.json',function(data){
let option = '<option value="">请选择</option>';
$.each(data,function(i){
if(data[i].twoId == $('#two').val()){
option += '<option value="'+data[i].threeId+'">'+data[i].threeName+'</option>';
}
});
console.log(option);
$('#three').html(option);//写入第二个菜单内容
$('#two option:first').remove();//删除第一个option
});
});
$('#three').change(function(){
//查看当前选择中元素内容
console.log($(this).find(':selected').text());//控制台输出第三级选中的内容
$('#three option:first').remove();
});
})
</script>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-25 13:09:23
老师总结：这个小小案例,其实里面有非常多的知识点的, 能做下来,很不容易
