您的位置：首页 > 其它

ajax实现三级联动的基本方法

2017-02-14 11:45 621 查看

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

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

<body>
<div id="sanji">//div的id为“sanji”
</div>

2.sanji js处理页面

$(document).ready(function(){

//向div里面放三个下拉菜单
var str = "<select id='sheng'></select>
<select id='shi'></select>
<select id='qu'></select>";
//给三个下拉列表定义 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 +="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

}
$("#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<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#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<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax 三级联动

相关文章推荐

新的分享

章节导航