Jquery+php+mysql建立省市级三级联动【很简单的构思】

来源：互联网发布：网易蜂巢注册域名编辑：程序博客网时间：2024/06/05 16:44

前边写过一篇类似的，那是用的纯js，这地把js换成jquery代码简介好理解。思路和以前的一样，都是ajax从php获取数据表内容。

数据表很奇葩，但是很有规律，比如北京市的id为11，北京的子级别id为：110101。。。我们可以在sql中这样匹配，where id like '".$id."__'";，返回json数据显示出来。

代码：

new.html

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="global.css" type="text/css">
<script type="text/javascript" src="./jquery-1.8.3.js"></script>
<script>
//初始化省级select
$(function(){
$.post("ajax-youku-server.php",{ name: "John", time: "2pm" } ,function(data){
var str="<option value ='0'>--请选择--</option>";
var obj=eval(data);
for (var i = 0;i<obj.length;i++) {
var str1="<option value ='"+obj[i].id+"'>"+obj[i].name+"</option>";
str+=str1;
};
$("#sheng").html(str);
});
});

//获取市级别和县级别的内容
function getArea(id,level){
$(function(){
$.post("ajax-youku-server.php",{ id:id} ,function(data){
var str="<option value ='0'>--请选择--</option>";
var obj=eval(data);
for (var i = 0;i<obj.length;i++) {
var str1="<option value ='"+obj[i].id+"'>"+obj[i].name+"</option>";
str+=str1;
};
$("#"+level).html(str);
});
});
}

</script>
</head>
<body>

<select id="sheng" onchange="getArea(this.value,'shi')"></select>省
<select id="shi" onchange="getArea(this.value,'xian')"></select>市
<select id="xian"></select>县

</body>
</html>

————————————

ajax-youku-server.php

<?php
header("Content-Type:text/html;charset=utf-8");
//建立数据库连接
mysql_connect("localhost","root","");
//选择数据库
mysql_select_db("area");
//设置连接数据库的编码方式
mysql_query("set names utf8");
//接受客户端传来的数据
$id=$_POST['id'];
//下划线就像我们平时用的*和?，sql的like语句中，使用%和_来代表任意多个字符和一个字符
$sql="select id,name from area where id like '".$id."__'";
//echo $sql;
//查询
$rs=mysql_query($sql);

//将查询到的数据封装成jason格式的字符串（在此也可以用php将数组转换为jason格式字符串的函数那样会更简单写）
$opstr="[";
while($rows=mysql_fetch_array($rs)){
$opstr.="{id:'".$rows['id']."',name:'".$rows['name']."'},";
}
$len=strlen($opstr)-1;
$opstr=substr($opstr,0,$len);
$opstr.="]";
echo $opstr;
?>

数据库文件我上篇文章中发了，大家从上篇文章中下载吧。

1 0