您的位置:首页 > 其它

三级联动 案例

2016-05-22 16:12 113 查看
test.php

<title>无标题文档</title>
//载入 jquery, 载入 三级联动js 样式表
<script src="jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>
</head>

<body>
//引用
<div id="sanji"></div>
</body>
</html>

sanji.js

// JavaScript Document
$(document).ready(function(e) {

//将DIV里面写入三个下拉列表
$("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");

//填充内容
//1.填充省
FillSheng();
//2.填充市
FillShi();
//3.填充区
FillQu();

//如果省选中变化的时候,去填充市和区
$("#sheng").change(function(){

//改变市
FillShi();
//改变区
FillQu();

})
//如果市选中变化的时候,去填充区
$("#shi").change(function(){

//改变区
FillQu();

})

//填充省的方法
function FillSheng()
{
//找到父级代号
var pcode = "0001";
//调用Ajax
$.ajax({

async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){

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

for(var i=0; i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}

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

}
});
}
//填充市的方法
function FillShi()
{
//找到父级代号
var pcode = $("#sheng").val();
//调用Ajax
$.ajax({
async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var str  = "";
var hang = data.split("|");

for(var i=0; i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}

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

//填充区的方法
function FillQu()
{
//找到父级代号
var pcode = $("#shi").val();
//调用Ajax
$.ajax({
async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var str  = "";
var hang = data.split("|");

for(var i=0; i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}

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

});

chuli.php

<?php
//取到传过来的父级代号
$pcode = $_POST["pcode"];
//引入数据操作类
include("DBDA.php");
$db = new DBDA();

//写SQL语句
$sql = "select AreaCode,AreaName,ParentAreaCode from ChinaStates where ParentAreaCode='{$pcode}'";
//执行
echo $db->StrQuery($sql);

DBDA.php

<?php

class DBDA
{
public $host = "localhost"; //服务器地址
public $uid = "root"; //数据库的用户名
public $pwd = "123"; //数据库的密码

//执行SQL语句,返回相应结果的函数
//$sql是要执行的SQL语句
//$type是SQL语句的类型,0代表增删改,1代表查询
//$db代表要操作的数据库
public function Query($sql,$type=1,$db="mydb")
{
//造连接对象
$conn = new MySQLi($this->host,$this->uid,$this->pwd,$db);

//判断连接是否成功
!mysqli_connect_error() or die("连接失败!");

//执行SQL语句
$result = $conn->query($sql);

//判断SQL语句类型
if($type==1)
{
//如果是查询语句返回结果集的二维数组
return $result->fetch_all();
}
else
{
//如果是其他语句,返回true或false
return $result;
}
}

//Ajax调用返回JSON
public function JsonQuery($sql,$type=1,$db="mydb")
{
//定义数据源
$dsn = "mysql:dbname={$db};host={$this->host}";
//造pdo对象
$pdo = new PDO($dsn,"{$this->uid}","{$this->pwd}");

//准备执行SQL语句
$st = $pdo->prepare($sql);

//执行预处理语句
if($st->execute())
{
if($type==1)
{
$attr = $st->fetchAll(PDO::FETCH_ASSOC);
return json_encode($attr);
}
else
{
if($st)
{
return "OK";
}
else
{
return "NO";
}
}

}
else
{
echo "执行失败!";
}

}
//Ajax调用返回字符串
public function StrQuery($sql,$type=1,$db="mydb")
{
//造连接对象
$conn = new MySQLi($this->host,$this->uid,$this->pwd,$db);

//判断连接是否成功
!mysqli_connect_error() or die("连接失败!");

//执行SQL语句
$result = $conn->query($sql);

//判断SQL语句类型
if($type==1)
{
$attr = $result->fetch_all();
$str = "";
//如果是查询语句返回字符串
for($i=0;$i<count($attr);$i++)
{
for($j=0;$j<count($attr[$i]);$j++)
{
$str = $str.$attr[$i][$j];
$str = $str."^";
}
$str = substr($str,0,strlen($str)-1);
$str = $str."|";
}
$str = substr($str,0,strlen($str)-1);

return $str;
}
else
{
//如果是其他语句,返回true或false
if($result)
{
return "OK";
}
else
{
return "NO";
}
}
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: