html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>title</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
</style>
<script type="text/javascript" src="public/public.js">
</script>
<script type="text/javascript">
/*
*页面初始化
*/
window.onload = function(){
//展示省的数据
$.get("category.php", "p_id=" + 1, display_province, "json");
//省触发onchange时间,展示对应城市数据
$("province").onchange = create_city;
//城市触发onchange时间,展示对应区数据
$("city").onchange = create_qu;
}
/*
* 省的onchange时间触发函数
*/
function create_city(){
//
//取得省的id值来判定展示哪个城市
var index = this.value;
//清空城市的option
$("city").length = 1;
$("qu").length=1;
$.get("category.php", "p_id=" + index, display_city, "json");
}
//城市触发onchange事件,展示对应区/县数据
function create_qu(){
//取得省的id值来判定展示哪个城市
var index = this.value;
//清空城市的option
$("qu").length = 1;
$.get("category.php", "p_id=" + index, display_qu, "json");
}
/*
*查询省时,返回AJAX状态码4&&status==200的回调函数
*/
function display_province(msg){
//下面注释抽象出来成show_data函数
// for(var i=0 in msg){
// var op = new Option(msg[i].region_name,msg[i].region_id);
// $("province").options.add(op);
// }
show_data("province", msg);
}
/*
*查询城市时,返回AJAX状态码4&&status==200的回调函数
*/
function display_city(msg){
//下面注释抽象出来成show_data函数
// for(var i=0 in msg){
// var op = new Option(msg[i].region_name,msg[i].region_id);
// $("city").options.add(op);
// }
show_data("city", msg);
}
/*
*查询区/县城时,返回AJAX状态码4&&status==200的回调函数
*/
function display_qu(msg){
show_data("qu", msg);
}
function show_data(id, msg){
//PHP处理后返回的是JSON对象,遍历
for (var i = 0 in msg) {
//创建option对象,option(文本,value值)如option("北京","2"),2是数据库的主ID
var op = new Option(msg[i].region_name, msg[i].region_id);
//sele追加option
$(id).options.add(op);
}
}
</script>
</head>
<body>
<select id="province">
<option value="-1">请选择省份</option>
</select>
<select id="city">
<option value="-1">请选择城市</option>
</select>
<select id="qu">
<option value="-1">请选择区/县</option>
</select>
</body>
</html>
PHP:
<?php
//得到请求的父id
$p_id = $_GET["p_id"];
//链接数据库
mysql_connect("localhost","root","root");
//设置字符集
mysql_query("set names uft8");
//选择数据库
mysql_select_db("ecshop");
//构造sql语句
$sql = "select * from ecs_region where parent_id='{$p_id}'";
//发送sql语句,结果集
$res = mysql_query($sql);
// 定义数组
$data = array();
//遍历结果集
while ($row =mysql_fetch_assoc($res)){
$data[]=$row;
}
echo json_encode($data);