本文实例为大家分享了ajax三级联动效果展示的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> <script src="../wenjian/jquery-2.2.3.min.js"></script> </head> <body> <select id="sheng"> <option>请选择</option> </select> <select id="shi"> <option >请选择</option> </select> <select id="qu"> <option >请选择</option> </select> </body> </html> <script> $.ajax({ data: {parent_id: 0},//发送的数据 dataType: "json",//返回值的类型 text为string型 type: 'post',//发送请求的方法(get) url: 'sheng_l.PHP',//发送请求的地址 success: function (data) {//发送成功时的回调函数 // console.log(data); for (var i in data) { $("#sheng").append("<option value='"+ data[i][2] +"'>" + data[i][1] +"</option>") } } }) $(document).ready(function () { $("#sheng").change(function () { $("#shi").get(0).options.length= 1; // $("#qu").get(0).options.length= 1; var data = $("#sheng").find("option:selected").val(); $.ajax({ data:{parent_id:data},type:"post",dataType:"json",url:"sheng_l.PHP",success:function (data) { for(var i in data){ $("#shi").append("<option value='" + data[i][2] +"'>" + data[i][1] +"</option>") } } }) }) }) $(document).ready(function () { $("#shi").change(function () { $("#qu").get(0).options.length= 1; var data = $("#shi").find("option:selected").val(); $.ajax({ data:{parent_id:data},success:function (data) { for (var i in data){ $("#qu").append("<option value='" +data[i][2] +"'>" +data[i][1] +"</option>") } } }) }) })