本文实例为大家分享了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>") } } }) }) })
<?PHP /** * Created by fcc * User: Administrator * Date: 2017/10/29 * Time: 20:56 */ require_once "../wenjian/DBDA.class.PHP"; $db = new DBDA(); $sql = "select * from region WHERE father_id = {$_POST['parent_id']}"; $result = $db->Query($sql); echo json_encode($result);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。