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},
 type:"post",
 dataType:"json",
 url:"sheng_l.php",
 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);