PHP+AJAX+MYSQL 仿凡客诚品省市县三级联动下拉菜单查询效果
2011-02-28 16:14
666 查看
连接数据库：db.php
<?php
$dbhost="localhost";
$dbpassword="123";
$dbuser ='root';//数据库用户名
$dbname = 'center';//数据库名
$dbcharset = 'gbk';//数据库编码,不建议修改
mysql_connect($dbhost,$dbuser,$dbpassword);
mysql_query("set names $dbcharset");
mysql_select_db($dbname);s
error_reporting(E_ALL);
?>
显示页面：city.php
<?php
require 'db.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="getcity.js"></script>
<script type="text/javascript" src="getnews.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>配送范围、资费</title>
</head>
<body>
<H2 style="font-size: 24px;">配送方式</H2>
<P>
<H3 style="font-size:16px;">配送范围、资费及配送时间</H3>
<ul style="width:1024px; list-style-type:none;">
<li style="float:left;"> <span style="font-size:14px"> 省/直辖市（必选）：</span><select name="areaProvince" id="areaProvince" onChange="queryCity(this)" >
<option value="" selected="selected" >请选择省份</option>
<?php
$rs=mysql_query("select * from province;");
?>
<? while($row=mysql_fetch_array($rs)){ ?>
<option value="<?=$row['provinceID'];?>" ><?=$row['province'];?></option>
<? };?>
</select>
</li>
<li style="float:left;">
<span id="shi" style="display:none;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-size:14px">市/地区（必选）：</td>
<td><select id="areaCity" name="city" onChange="queryCountry(this)" style="display:none" >
<option value="" selected="selected" >请选择市/地区</option>
</select></td>
</tr>
</tbody>
</table>
</span>
</li>
<li style="float:left;">
<span id="xian" style="display:none; float:left;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-size:14px">县/地区（必选）：</td>
<td><select id="areaCountry" name="area" onchange="showUser(this.value)" style="display:none" >
<option value="" selected="selected">请选择县/地区</option>
</select></td>
</tr>
</tbody>
</table>
</span>
</li>
</ul>
<br/>
<ul style=" list-style:none; font-family:'宋体'; width:1024px; " >
<li id="txtHint" style="font-size:16px">
</li>
</ul>
</body>
</html>
省市县三级联动：
php部分 getcity.php
<?php
require 'db.php';
function getCity($fatherid){
if($fatherid)
{
$citys=array();
$rs=mysql_query("select * from city where father=$fatherid;");
while($row=mysql_fetch_array($rs))
{
$citys[]=array('cityid'=>$row['cityID'],'city'=>iconv('GBK','UTF-8',$row['city']));
}
echo json_encode($citys);
}
}
function getArea($fatherid){
if($fatherid)
{
$areas=array();
$rs=mysql_query("select * from area where father=$fatherid;");
while($row=mysql_fetch_array($rs))
{
$areas[]=array('areaid'=>$row['areaID'],'area'=>iconv('GBK','UTF-8',$row['area']));
}
echo json_encode($areas);
}
}
if(isset($_REQUEST['action'])&&$_REQUEST['action']!='')
{
switch ($_REQUEST['action'])
{
case 'city':
if(isset($_REQUEST['id'])&&$_REQUEST['id']!='')
getCity($_REQUEST['id']);
break;
case 'area':
if(isset($_REQUEST['id'])&&$_REQUEST['id']!='')
getArea($_REQUEST['id']);
break;
}
}
?>
AJAX部分 getcity.js
// JavaScript Document
var xmlHttp;
function clsopt(opt)
{
if(opt)
{
//清除县/区列表内容并设置为默认值
var length=opt.length;
for(var i=length-1;i>0;i--)
{
opt.remove(i);
}
}
}
function valid(opt)
{
if(opt.options[opt.selectedIndex].value=='')
{
alert('请选择县/区');
return false;
}
}
function createXMLHttpRequest()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
var aVersions = ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var i=0; i<aVersions.length; i++)
xmlhttp = new ActiveXObject(aVersions[i]);
}
if (xmlhttp!=null)
{
return xmlhttp;
}
else
{
alert("你的浏览器不支持 XMLHTTP.");
}
}
function queryCity(opt)
{ document.getElementById("shi").style.display = "block";
document.getElementById("areaCity").style.display = "block";
id=opt.options[opt.selectedIndex].value;
if(id=='')
{
alert('请选择省');
clsopt(document.getElementById("areaCity"));
clsopt(document.getElementById("areaCountry"));
return false;
}
xmlHttp=createXMLHttpRequest();
type="city";
var url="getcity.php?action=city&id="+id;
xmlHttp.onreadystatechange=statechange;
xmlHttp.open("GET",url,true);
xmlHttp.send('');
}
function queryCountry(opt)
{ document.getElementById("xian").style.display = "block";
document.getElementById("areaCountry").style.display = "block";
id=opt.options[opt.selectedIndex].value;
if(id=='')
{
alert('请选择市/区');
clsopt(document.getElementById("areaCountry"));
return false;
}
xmlHttp=createXMLHttpRequest();
type="country";
var url="getcity.php?action=area&id="+id;
xmlHttp.onreadystatechange=statechange;
xmlHttp.open("GET",url,true);
xmlHttp.send('');
}
function statechange()
{
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
if(type=="city")
{
showCity();
}
else if(type="country")
{
showCountry();
}
}
}
function showCity(){
var cityopt=document.getElementById("areaCity");
var citys=eval('('+xmlHttp.responseText+')');
//cityopt.innerHTML="";
//刷新市/区列表内容并设置为默认值
clsopt(cityopt);
var str="";
for(i in citys)
{
cityopt.options.add(new Option(citys[i].city,citys[i].cityid));
str+=citys[i].city;
}
clsopt(document.getElementById("areaCountry"));
}
function showCountry(){
var areaopt=document.getElementById("areaCountry");
//刷新县/区列表内容并设置为默认值
clsopt(areaopt);
var areas=eval('('+xmlHttp.responseText+')');
for(i in areas)
{
areaopt.options.add(new Option(areas[i].area,areas[i].areaid));
}
}
-->
获得地区的运费信息:
php部分 getnews.php
<?
$q=$_GET["q"];
$con=mysql_connect('localhost', 'root', '123');
mysql_query("set names 'utf8'");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("center", $con);
$sql="SELECT * FROM `info` WHERE fatherID=$q ";
$result = mysql_query($sql);
echo "
<table border=0 cellpadding=2 cellspacing=1 bgcolor='#B6B3AB' style='text-align:center'>
<tr bgcolor='#b1c8d6' >
<th>送货方式</th>
<th>配送范围</th>
<th>配送费</th>
<th>商品出库后配送时限 </th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr bgcolor='#ffffff' >";
//echo "<td>" . $row['storehouse'] . "</td>";
echo "<td>" . $row['method_1'] . "</td>";
echo "<td>" . $row['range_1'] . "</td>";
echo "<td>" . $row['charge_1'] . "</td>";
echo "<td>" . $row['timelimit_1'] ."</td>";
//echo "<td>" . $row['change'] . "</td>";
// echo "<td>" . $row['pos'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
AJAX部分 getnews.js
// JavaScript Document
var xmlHttp
function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getnews.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
数据库文件：center.sql
这里面存有全国所有省市县的名称以及送货方式、运费。这些数据我花费了14天才搞完，累死了！！！
只要用phpMyAdmin创建一个名字为“center”的数据库，再将这个文件导入就能用了。如果有需要这个文件的博友，请用邮箱联系我！
我的邮箱：gaofei019@163.com
具体效果如下：
<?php
$dbhost="localhost";
$dbpassword="123";
$dbuser ='root';//数据库用户名
$dbname = 'center';//数据库名
$dbcharset = 'gbk';//数据库编码,不建议修改
mysql_connect($dbhost,$dbuser,$dbpassword);
mysql_query("set names $dbcharset");
mysql_select_db($dbname);s
error_reporting(E_ALL);
?>
显示页面：city.php
<?php
require 'db.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="getcity.js"></script>
<script type="text/javascript" src="getnews.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>配送范围、资费</title>
</head>
<body>
<H2 style="font-size: 24px;">配送方式</H2>
<P>
<H3 style="font-size:16px;">配送范围、资费及配送时间</H3>
<ul style="width:1024px; list-style-type:none;">
<li style="float:left;"> <span style="font-size:14px"> 省/直辖市（必选）：</span><select name="areaProvince" id="areaProvince" onChange="queryCity(this)" >
<option value="" selected="selected" >请选择省份</option>
<?php
$rs=mysql_query("select * from province;");
?>
<? while($row=mysql_fetch_array($rs)){ ?>
<option value="<?=$row['provinceID'];?>" ><?=$row['province'];?></option>
<? };?>
</select>
</li>
<li style="float:left;">
<span id="shi" style="display:none;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-size:14px">市/地区（必选）：</td>
<td><select id="areaCity" name="city" onChange="queryCountry(this)" style="display:none" >
<option value="" selected="selected" >请选择市/地区</option>
</select></td>
</tr>
</tbody>
</table>
</span>
</li>
<li style="float:left;">
<span id="xian" style="display:none; float:left;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-size:14px">县/地区（必选）：</td>
<td><select id="areaCountry" name="area" onchange="showUser(this.value)" style="display:none" >
<option value="" selected="selected">请选择县/地区</option>
</select></td>
</tr>
</tbody>
</table>
</span>
</li>
</ul>
<br/>
<ul style=" list-style:none; font-family:'宋体'; width:1024px; " >
<li id="txtHint" style="font-size:16px">
</li>
</ul>
</body>
</html>
省市县三级联动：
php部分 getcity.php
<?php
require 'db.php';
function getCity($fatherid){
if($fatherid)
{
$citys=array();
$rs=mysql_query("select * from city where father=$fatherid;");
while($row=mysql_fetch_array($rs))
{
$citys[]=array('cityid'=>$row['cityID'],'city'=>iconv('GBK','UTF-8',$row['city']));
}
echo json_encode($citys);
}
}
function getArea($fatherid){
if($fatherid)
{
$areas=array();
$rs=mysql_query("select * from area where father=$fatherid;");
while($row=mysql_fetch_array($rs))
{
$areas[]=array('areaid'=>$row['areaID'],'area'=>iconv('GBK','UTF-8',$row['area']));
}
echo json_encode($areas);
}
}
if(isset($_REQUEST['action'])&&$_REQUEST['action']!='')
{
switch ($_REQUEST['action'])
{
case 'city':
if(isset($_REQUEST['id'])&&$_REQUEST['id']!='')
getCity($_REQUEST['id']);
break;
case 'area':
if(isset($_REQUEST['id'])&&$_REQUEST['id']!='')
getArea($_REQUEST['id']);
break;
}
}
?>
AJAX部分 getcity.js
// JavaScript Document
var xmlHttp;
function clsopt(opt)
{
if(opt)
{
//清除县/区列表内容并设置为默认值
var length=opt.length;
for(var i=length-1;i>0;i--)
{
opt.remove(i);
}
}
}
function valid(opt)
{
if(opt.options[opt.selectedIndex].value=='')
{
alert('请选择县/区');
return false;
}
}
function createXMLHttpRequest()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
var aVersions = ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var i=0; i<aVersions.length; i++)
xmlhttp = new ActiveXObject(aVersions[i]);
}
if (xmlhttp!=null)
{
return xmlhttp;
}
else
{
alert("你的浏览器不支持 XMLHTTP.");
}
}
function queryCity(opt)
{ document.getElementById("shi").style.display = "block";
document.getElementById("areaCity").style.display = "block";
id=opt.options[opt.selectedIndex].value;
if(id=='')
{
alert('请选择省');
clsopt(document.getElementById("areaCity"));
clsopt(document.getElementById("areaCountry"));
return false;
}
xmlHttp=createXMLHttpRequest();
type="city";
var url="getcity.php?action=city&id="+id;
xmlHttp.onreadystatechange=statechange;
xmlHttp.open("GET",url,true);
xmlHttp.send('');
}
function queryCountry(opt)
{ document.getElementById("xian").style.display = "block";
document.getElementById("areaCountry").style.display = "block";
id=opt.options[opt.selectedIndex].value;
if(id=='')
{
alert('请选择市/区');
clsopt(document.getElementById("areaCountry"));
return false;
}
xmlHttp=createXMLHttpRequest();
type="country";
var url="getcity.php?action=area&id="+id;
xmlHttp.onreadystatechange=statechange;
xmlHttp.open("GET",url,true);
xmlHttp.send('');
}
function statechange()
{
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
if(type=="city")
{
showCity();
}
else if(type="country")
{
showCountry();
}
}
}
function showCity(){
var cityopt=document.getElementById("areaCity");
var citys=eval('('+xmlHttp.responseText+')');
//cityopt.innerHTML="";
//刷新市/区列表内容并设置为默认值
clsopt(cityopt);
var str="";
for(i in citys)
{
cityopt.options.add(new Option(citys[i].city,citys[i].cityid));
str+=citys[i].city;
}
clsopt(document.getElementById("areaCountry"));
}
function showCountry(){
var areaopt=document.getElementById("areaCountry");
//刷新县/区列表内容并设置为默认值
clsopt(areaopt);
var areas=eval('('+xmlHttp.responseText+')');
for(i in areas)
{
areaopt.options.add(new Option(areas[i].area,areas[i].areaid));
}
}
-->
获得地区的运费信息:
php部分 getnews.php
<?
$q=$_GET["q"];
$con=mysql_connect('localhost', 'root', '123');
mysql_query("set names 'utf8'");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("center", $con);
$sql="SELECT * FROM `info` WHERE fatherID=$q ";
$result = mysql_query($sql);
echo "
<table border=0 cellpadding=2 cellspacing=1 bgcolor='#B6B3AB' style='text-align:center'>
<tr bgcolor='#b1c8d6' >
<th>送货方式</th>
<th>配送范围</th>
<th>配送费</th>
<th>商品出库后配送时限 </th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr bgcolor='#ffffff' >";
//echo "<td>" . $row['storehouse'] . "</td>";
echo "<td>" . $row['method_1'] . "</td>";
echo "<td>" . $row['range_1'] . "</td>";
echo "<td>" . $row['charge_1'] . "</td>";
echo "<td>" . $row['timelimit_1'] ."</td>";
//echo "<td>" . $row['change'] . "</td>";
// echo "<td>" . $row['pos'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
AJAX部分 getnews.js
// JavaScript Document
var xmlHttp
function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getnews.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
数据库文件：center.sql
这里面存有全国所有省市县的名称以及送货方式、运费。这些数据我花费了14天才搞完，累死了！！！
只要用phpMyAdmin创建一个名字为“center”的数据库，再将这个文件导入就能用了。如果有需要这个文件的博友，请用邮箱联系我！
我的邮箱：gaofei019@163.com
具体效果如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- php jquery ajax json 全国省市区三级联动下拉列表 简单实现
- php jquery ajax json 全国省市区三级联动下拉列表 简单实现
- jQuery+jsp实现省市县三级联动效果(附源码)
- Ajax + JSON + Servlet + Oracle数据库实现省市县三级联动效果
- 中国地区三级联动下拉菜单效果分析
- php+jQuery实现的三级导航栏下拉菜单显示效果
- 使用三层实现省市县三级联动（利用ajax实现无刷新效果）
- 中国省市二级联动和省市县三级联动下拉菜单
- 省市区数据库以及后台工程（Java）前端三级联动 后台数据查询
- Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net
- php jquery ajax json 全国省市区三级联动下拉列表 简单实现
- php+ajax实现三级联动（以省市县三级联动为例）
- Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net
- ajax+php无刷新二级联动下拉菜单(省市联动)源码
- JavaScript实现省市县三级联动效果~~~
- ajax+php无刷新二级联动下拉菜单(省市联动)源码
- ajax+json+dom+php+mysql省市县三级联动
- JSON 数据,实现省市县三级联动下拉菜单
- ajax+php无刷新二级联动下拉菜单(省市联动)源码
- js之省市区(县)三级联动效果