ajax三级联动是什么,ajax实现三级联动最基本的概念

这次给大家带来ajax实现三级联动最基本的概念，ajax实现三级联动的注意事项有哪些，下面就是实战案例，一起来看一下。

本文实例为大家分享了ajax实现三级联动的具体代码，供大家参考，具体内容如下

1.首先在一个页面上布置一个p 方便日后引用方法

//p的id为“sanji”

2.sanji js处理页面$(document).ready(function(){

//向p里面放三个下拉菜单

var str = "

";

//给三个下拉列表定义 str 变量

$("#sanji").html(str);

FillSheng();

FillShi();

FillQu();//Sheng Shi Qu的逻辑顺序

$("#sheng").change(function(){

FillShi();

FillQu();

})//给sheng菜单添加点击事件

$("#shi").change(function(){

FillQu();

})//给shi菜单添加点击事件

});//页面加载完成之后过来执行某些代码

3.填充sheng方法function FillSheng()

{

var pcode = "";//定义一个变量

$.ajax({

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success:function(data){

var hang = data.split("^");

str +=""+lie[1]+"";

}

$("#sheng").html(str);

});

}

2.填充shi方法function FillShi()

{

var pcode = $("#sheng").val();

$.ajax({

async:false,

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

var hang = data.split("|");

var str = "";

for(var i=0;i

{

var lie = hang[i].split("^");

str += ""+lie[1]+"";

}

$("#shi").html(str);

}

});

}

3.填充qu方法function FillQu()

{

var pcode = $("#shi").val();

$.ajax({

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

var hang = data.split("|");

var str = "";

for(var i=0;i

{

var lie = hang[i].split("^");

str += ""+lie[1]+"";

}

$("#qu").html(str);

}

});

}

4.chuli页面<?php

include("DBDA.class.php");

$db = new DBDA();

$pcode = $_POST["pcode"];

$sql = "select * from chinastates where parentareacode='{$pcode}'";

echo $db->StrQuery($sql);

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：